---

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

Docs: Nuxt playground

Storybook: Storybook

pnpm i @perigee/vue-primitives

1. I use let variables or useRef where React uses useRef. Radix-vue creates unnecessary reactive ref variables in all places, which is completely unnecessary.

2. I use the composeEventHandlers hook. This hook allows canceling events through preventDefault. Unfortunately, in Vue, handlers received from the parent component end up at the end of the array and are called last (I might have misunderstood the code, there may be inaccuracies).

3. I use attribute inheritance instead of redefining them in each component, generating unnecessary code. Moreover, it seems that Volar now has typing for attrs. This approach may change if it turns out to be inconvenient to use.

4. I do not use their useForwardExpose. A hook that replaces the original expose object to pass props outside. Why, if access to them is already available.

5. I do not use asChild for implementing primitives. Instead, I wrap the component's content in a hook and use it. I thought it was a bit cumbersome to use so many empty wrapper components when they can be eliminated. For example, the FocusScope wrapper is 3 components: FocusScope -> Primitive -> Slot. If there are 3 such wrappers, it is already a tree of 9+ components. This is currently a test implementation.

6. Slot [WIP] Discussion

7. The idea of discarding components and leaving only hooks that return props is currently being explored. For example, as in Zag and Melt. If the Vapor mod is released during our lifetime, this method will allow us to get rid of Primitive and Slot (VDom).

8. Different implementation of Collection without Map, VDom. Radix vue

9. Presence is just a hook for me. The same approach was found in Solid's Kobalte. In radix-vue, it is the reason for the absence of content on the first render in components like Accordion.

10. Availability of component context export for access in user code. It seems that this was promised to be added in Radix v2. I am not following.

11. No empty wrappers that do nothing.

12. An easier way to get the current element without computed. Radix-vue

13. Scoped Context WIP Link Link

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

Developers can work on unclaimed components.