Toolkit with accessible components, styles, and examples for your next web app
- Tweets 556
- Following 4
- Followers 2,570
- Likes 764
Ariakit retweeted
I believe I've finally settled on a Tag+Combobox component API for @ariakitjs.
There are separate, highly flexible components for each part (screenshot 1), but users can easily abstract these into a higher-level version (screenshot 2):
ALT The following JSX code: <TagProvider> <TagListLabel>Fruits</TagListLabel> <TagList> <Tag value="Apple" /> <Tag value="Orange" /> <ComboboxProvider> <Combobox render={<TagInput />} /> <ComboboxPopover> <ComboboxItem value="Grape" /> <ComboboxItem value="Watermelon" /> </ComboboxPopover> </ComboboxProvider> </TagList> </TagProvider>
ALT The following JSX code: <TagList label="Fruits"> <Tag value="Apple" /> <Tag value="Orange" /> <TagInput> <TagOption value="Grape" /> <TagOption value="Watermelon" /> </TagInput> </TagList>
6
13
157
17,329
Ariakit retweeted
I'm stunned by @ariakitjs
It is a so appealing UI lib!
Go check the examples 👇
ariakit.org/examples
2
14
1,722
Ariakit retweeted
Details: we can optionally insert the completion string directly while typing in the combobox.
However, this usually suggests an addition. If the item is already selected, pressing Enter will remove it, so we don't use the completion string.
Does it make sense?
2
4
55
6,988
Ariakit retweeted
Testing the undo/redo feature on the upcoming Ariakit Tag components.
5
7
190
16,356
Ariakit retweeted
What a thoughtful detail in @ariakitjs live examples: hover over components, hooks and attributes to get inline info about them
(video alt: a live example with code in ariakit's website. As the mouse hovers over code elements, documentation about it appears in a popup).
3
16
1,428
Ariakit retweeted
.@ariakitjs is pretty fricking sweet. I've been struggling with a keyboard accessible menu for days? and I was able to build what I want in like 20 minutes with Ariakit
1
2
15
2,073
Ariakit retweeted
Treemap charts for totals/assets/modules/packages are landing on the next bundle-stats.
Powered by @d3js_org and @ariakitjs
github.com/relative-ci/bundl…
1
3
17
2,458
Ariakit retweeted
I'm working on new Tag components for Ariakit.
Here's a demo that combines Tag with Combobox:
13
11
252
26,444
Ariakit retweeted
Yall should use the 20% too, ariakit is WAY TOO GOOD, and ariakit plus is not even just about ariakit, it's about good UI/accessibility
🙈 Shameless plug: Ariakit Plus is on sale for the next 24 hours. This includes everything we'll add to the site in the future.
ariakit.org/plus
2
4
22
3,973
Ariakit retweeted
My perspective on Ariakit dot org is that it's going to stick around for decades:
• We can provide tested examples using any library, including Radix, RAC, Headless UI, MUI, etc.
• As the web platform evolves, we'll have examples using only native widgets. You'll learn how to implement and style them properly.
• If the future of web development relies on AI prompts, oh boy, be ready to see a ton of prompt examples ✨
2
4
30
4,299
Ariakit retweeted
We used the ariakit combobox to reimplement the react select api without emotion and it worked pretty well for both single and multiselect. Thank you very much for this high quality library. Ditching one radix component at a time for Ariakit.
2
2
12
1,999
Ariakit retweeted
@ariakit/react v0.4.2 has been released with built-in support for rendering tabs in composite widgets such as Combobox.
Building a combobox with options inside tab panels should be significantly easier now.
ariakit.org/changelog#042
ALT Screenshot of the "Combobox with tabs" section from the link provided in the post
ALT Screenshot of a combobox widget with tabs inside
1
7
118
8,068
Ariakit retweeted
With a custom hook and sliding tab overlay component, you can animate your @ariakitjs tabs beautifully!
1
1
4
693
Ariakit retweeted
Navigation drawer component using @ariakitjs headless Dialog. Such a simple yet powerful api to work with.
1
1
10
704
Ariakit retweeted
✨ New example: Animated Disclosure
Uses plain CSS transitions to animate the height of the disclosure content. No need for measuring the final height with JavaScript.
ariakit.org/examples/disclos…
6
11
134
16,705
Ariakit retweeted
✨ New example: Animated TabPanel
A step-by-step tutorial featuring:
✦ Plain CSS transitions
✦ CSS nesting
✦ :has() pseudo-class
✦ prefers-reduced-motion
ariakit.org/examples/tab-pan…
5
40
5,734
Ariakit retweeted
I’m fast becoming a big fan of @ariakitjs.
Outside the ease of customization, the chefs kiss for me is the abundance of examples with clean, fullscreen previews.
1
2
26
2,017
Ariakit retweeted
I’m working on a migration to @ariakitjs for our Comboboxes, and I really like it.
A hard part has been creating a single set of polymorphic components to conditionally include search. This isn’t a ding on ariakit, because search changes the role structure.
2
2
9
2,460