<a href="https://oku-ui.com">
  <img alt="Oku UI hero image" src="https://github.com/oku-ui/primitives/blob/main/.github/assets/primitives-cover.png?raw=true"
</a>

---

<p>
  <a href="https://www.npmjs.com/package/@oku-ui/primitives"><img src="https://img.shields.io/npm/v/@oku-ui/primitives.svg?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a>
  <a href="https://www.npmjs.com/package/@oku-ui/primitives"><img src="https://img.shields.io/npm/dm/@oku-ui/primitives.svg?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"></a>
  <a href="https://github.com/oku-ui/primitives/tree/main/LICENSE"><img src="https://img.shields.io/github/license/nuxt/nuxt.svg?style=flat&colorA=18181B&colorB=28CF8D" alt="License"></a>
  <a href="https://nuxt.com"><img src="https://img.shields.io/badge/Oku Primitives%20Docs-18181B?logo=nuxt.js" alt="Website"></a>
  <a href="https://chat.oku-ui.com"><img src="https://img.shields.io/badge/Oku%20Discord-18181B?logo=discord" alt="Discord"></a>
</p>

# Oku Primitives

**An open-source UI component library for building high-quality, accessible design systems and web apps.**

Oku Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system or adopt them incrementally.

Website: [Oku Website](https://oku-ui.com)

---

# Contributing

Please read our [contributing guide](https://github.com/oku-ui/primitives/blob/master/CONTRIBUTING.md)

# TODO

## Components

Enter the component you want most in the components, leave the emojis and follow.

**Developers can work on unclaimed components**

### Components
### Components

| Component                                                                                       | Status       | 🔗 Hook v1 | 👀 Visual Check | 📄 Docs | 📝 Note                        |
| ------------------------------------------------------------------------------------------------ | ------------ | ---------- | --------------- | ------- | ------------------------------ |
| [Accordion](https://vue-primitives.netlify.app/?path=/story/components-accordion--single)       | ✅ Completed | ✅         | ✅              |         |                                |
| [AlertDialog](https://vue-primitives.netlify.app/?path=/story/components-alertdialog--styled)   | ✅ Completed | ✅         |                 |         |                                |
| [AspectRatio](https://vue-primitives.netlify.app/?path=/story/components-aspectratio--styled)   | ✅ Completed | ✅         |                 |         |                                |
| [Avatar](https://vue-primitives.netlify.app/?path=/story/components-avatar--styled)             | ✅ Completed | ✅         |                 |         | 🔨 PR from Radix               |
| [Checkbox](https://vue-primitives.netlify.app/?path=/story/components-checkbox--styled)         | ✅ Completed | ✅         |                 |         | 🔧 Needs input                 |
| [Collapsible](https://vue-primitives.netlify.app/?path=/story/components-collapsible--styled)   | ✅ Completed | ✅         | ✅              |         |                                |
| [Context Menu](https://vue-primitives.netlify.app/?path=/story/components-contextmenu--styled)  | ✅ Completed | ✅         |                 |         |                                |
| [Dialog](https://vue-primitives.netlify.app/?path=/story/components-dialog--styled)             | ✅ Completed | ✅         |                 |         |                                |
| [DropdownMenu](https://vue-primitives.netlify.app/?path=/story/components-dropdownmenu--styled) | ✅ Completed | ✅         |                 |         |                                |
| Form                                                                                            | ❌ Not Started | ❌         |                 |         |                                |
| [HoverCard](https://vue-primitives.netlify.app/?path=/story/components-hovercard--chromatic)    | ✅ Completed | ✅         |                 |         | 🔧 Needs polygon; fix close    |
| [Label](https://vue-primitives.netlify.app/?path=/story/components-label--styled)               | ✅ Completed | ✅         |                 |         |                                |
| [Menubar](https://vue-primitives.netlify.app/?path=/story/components-menubar--styled)           | ✅ Completed | ✅         |                 |         |                                |
| NavigationMenu                                                                                  | 🚧 In Progress | 🚧         |                 |         |                                |
| [Popover](https://vue-primitives.netlify.app/?path=/story/components-popover--styled)           | ✅ Completed | ✅         |                 |         |                                |
| [Progress](https://vue-primitives.netlify.app/?path=/story/components-progress--styled)         | ✅ Completed | ✅         |                 |         | ✅                              |
| [RadioGroup](https://vue-primitives.netlify.app/?path=/story/components-radiogroup--styled)     | ✅ Completed | ✅         |                 |         | 🔧 Needs input                 |
| [ScrollArea](https://vue-primitives.netlify.app/?path=/story/components-scrollarea--basic)      | ✅ Completed | ✅         |                 |         |                                |
| Select                                                                                          | 🚧 In Progress | 🚧         |                 |         |                                |
| [Separator](https://vue-primitives.netlify.app/?path=/story/components-separator--styled)       | ✅ Completed | ✅         |                 |         |                                |
| [Slider](https://vue-primitives.netlify.app/?path=/story/components-slider--styled)             | ✅ Completed | ✅         | ✅              |         |                                |
| [Switch](https://vue-primitives.netlify.app/?path=/story/components-switch--styled)             | ✅ Completed | ✅         |                 |         | 🔧 Needs input                 |
| [Tabs](https://vue-primitives.netlify.app/?path=/story/components-tabs--styled)                 | ✅ Completed | ✅         | ✅              |         |                                |
| [Toast](https://vue-primitives.netlify.app/?path=/story/components-toast--styled)               | ✅ Completed | ✅         |                 |         |                                |
| [ToggleGroup](https://vue-primitives.netlify.app/?path=/story/components-togglegroup--single)   | ✅ Completed | ✅         | ✅              |         |                                |
| [Toggle](https://vue-primitives.netlify.app/?path=/story/components-toggle--styled)             | ✅ Completed | ✅         | ✅              |         |                                |
| [Toolbar](https://vue-primitives.netlify.app/?path=/story/components-toolbar--styled)           | ✅ Completed | ✅         |                 |         | 🔧 Focus on MouseDown          |
| [Tooltip](https://vue-primitives.netlify.app/?path=/story/components-tooltip--styled)           | ✅ Completed | ✅         |                 |         |                                |

---

### Utilities

| Utility                                                                                              | Status       | 🔗 Hook v1 | 👀 Visual Check | 📄 Docs | 📝 Note                             |
| ---------------------------------------------------------------------------------------------------- | ------------ | ---------- | --------------- | ------- | ----------------------------------- |
| [Collection](https://vue-primitives.netlify.app/?path=/story/utilities-rovingfocusgroup--basic)      | 🚧 Partial | ✅         |                 |         | 🔧 Needs array items               |
| [DismissableLayer](https://vue-primitives.netlify.app/?path=/story/utilities-dismissablelayer--basic) | 🚧 Partial | ✅         |                 |         | 🔧 Dismissable like Solid.js       |
| [FocusScope](https://vue-primitives.netlify.app/?path=/story/utilities-focusscope--basic)             | ✅ Completed | ✅         |                 |         |                                     |
| [Menu](https://vue-primitives.netlify.app/?path=/story/utilities-menu--styled)                        | ✅ Completed | ✅         |                 |         |                                     |
| [Popper](https://vue-primitives.netlify.app/?path=/story/utilities-popper--styled)                    | ✅ Completed | ✅         |                 |         | 🔧 Needs Arrow                     |
| [Portal](https://vue-primitives.netlify.app/?path=/story/utilities-portal--base)                      | ✅ Completed | ❌         |                 |         | 🔧 Dismissable like Solid.js       |
| [Presence](https://vue-primitives.netlify.app/?path=/story/utilities-presence--basic)                 | ✅ Completed | ✅         |                 |         |                                     |
| Primitives                                                                                           | ✅ Completed | ❌         |                 |         |                                     |
| [RovingFocusGroup](https://vue-primitives.netlify.app/?path=/story/utilities-rovingfocusgroup--basic) | ✅ Completed | ✅         | ✅              |         |                                     |
| Slot                                                                                                 | ✅ Completed | ❌         |                 |         | 🔧 Remove VDom                     |
| [VisuallyHidden](https://vue-primitives.netlify.app/?path=/story/utilities-visuallyhidden--basic)     | ✅ Completed | ❌         |                 |         |                                     |
## Community

- [Discord](https://chat.oku-ui.com) - To get involved with the Oku community, ask questions and share tips.
- [Twitter](https://twitter.com/oku_ui) - To receive updates, announcements, blog posts, and general Oku tips.

## Sponsors

<p align="center">
  <a href="https://cdn.jsdelivr.net/gh/productdevbook/static/sponsors.svg">
    <img alt="sponsors" src='https://cdn.jsdelivr.net/gh/productdevbook/static/sponsors.svg'/>
  </a>
</p>

## Thanks

Thanks to [@radix_ui](https://github.com/radix-ui/primitives) for the inspiration and the great work they've done with [Radix Primitives](https://radix-ui.com). We proceed through the initial stages of many codes by looking at them.

Thanks to Johnson Chu [@johnsoncodehk](https://github.com/johnsoncodehk). Supported me with many issues that I was stuck in Typescript.

Thanks to Daniel Roe [@danielroe](https://github.com/danielroe). Nuxt has helped me in many areas so far.

Thanks to Kevin Deng [@sxzz](https://github.com/sxzz). Helped me a lot with the issues I was stuck in Vue. and [Vue Macros](https://vue-macros.sxzz.moe) is a great project.

## Credits
- [Daniel Roe](https://github.com/danielroe)
- [Johnson Chu](https://github.com/johnsoncodehk)
- [Skirtle](https://github.com/skirtles-code)
- [Jacek Karczmarczyk](https://github.com/jacekkarczmarczyk)
- [Headless UI](https://headlessui.com)
- [Destyler](https://destyler.org)
- [Radix Vue](https://github.com/unovue/radix-vue)
- [Element Plus](https://github.com/element-plus/element-plus)

---

## License

Licensed under the MIT License, Copyright © 2023-present [productdevbook](https://twitter.com/productdevbook).

See [LICENSE](./LICENSE) for more information.