Working on an app that makes it super simple to save/manage links or bookmarks
This is a demo of the associated browser extension. I believe this is the quickest way to bookmark a page 😅
Built with:
@ariakitjs@tailwindcss
react-hot-toast by @timolins
more on this soon!
I highly appreciate the work that was put in #ReactAria, but it somehow never fully worked out for us. The last days I worked on migrating our selects and comboboxes to @ariakitjs and the result is amazing. It was very easy to work with. Great API, great docs.
I almost always start with the native HTML select element. I reach for @ariakitjs menus and co. when the select element doesn't fit the requirements.
In this case, I believe this is more than good enough at least for the v1 of this.
the @ariakitjs website is amazing: ariakit.org@diegohaz did an amazing job with it, and the additional features from the paid Ariakit Plus plan make it even better (and help fund it as an OSS project).
I wish shadcn/ui used @ariakitjs instead of Radix
I love Radix but there are so many times where I want to drop down to eg. a Composite role to build something custom
It works the same way in Todoist. I believe it is a pretty common practice of any good component library these days. We use @ariakitjs, which is insanely good for this and much more.
I've been working on a major overhaul of our filters with great keyboard support and multi-selection. It's my first time using @ariakitjs and it's now my favourite component library.
✨ New example: Select with Combobox and Tab
A custom Select component that can be used to create anything from a simple custom select widget to a searchable, tabbed one.
Demo: ariakit.org/examples/select-…
@ariakit/react v0.4.6 has been released with new Select features.
You can now have non-composite items within SelectPopover without breaking the accessibility tree: just render SelectItem elements inside SelectList and everything else outside of it.
New example soon 🔜
ALT Screenshot of a changelog section with the following content:
0.4.6
Nested SelectList
The SelectList component can now be nested within a SelectPopover. This lets you render additional elements inside the popover without breaking the accessibility tree. The ARIA roles will be automatically adjusted to ensure a valid accessibility tree:
<SelectProvider>
<Select />
<SelectPopover>
<SelectHeading>Fruits</SelectHeading>
<SelectDismiss />
<SelectList>
<SelectItem value="Apple" />
<SelectItem value="Banana" />
</SelectList>
</SelectPopover>
</SelectProvider>