Toolkit with accessible components, styles, and examples for your next web app
- Tweets 556
- Following 4
- Followers 2,569
- Likes 764
ALT Terminal output showing the successful execution of the pnpm i command in the ariakit repository, adding node version 24.18.0
ALT A notification showing a winning bid for the "ariakit.com" domain. The text reads, "Congratulations! Your bid won," with a winning bid of $305 USD and a yearly renewal cost of $21.99 USD.
ALT A technical diagram comparing three ways to style element corners using CSS variables `--r: 12px` and `--gap: 4px`. 1. "Border Radius": Standard support across all major browsers using `border-radius: var(--r)`. 2. "Corner Shape": Uses `corner-start-end-shape: scoop` and `border-start-end-radius` calculation, shown with Chrome and Edge icons. 3. "Border Shape": Uses a complex custom `border-shape` definition (likely CSS Houdini/Paint API) with extensive geometry calculations for shoulders and arcs, indicated with a Chrome Canary icon.
ALT A design diagram illustrating the "Concentric border radius" rule. It states the formula: "inner radius = parent radius - padding." Three zoomed-in circles show corners of a UI card interface, demonstrating different radius pairings like 16px outer/12px inner, 12px outer/6px inner, and 16px outer/8px inner, ensuring smooth, nested curves.
ALT A visual comparison of two segmented toggle switches with "Profile" selected. The top version uses a flat white pill for the active state with no shadow, blending smoothly with the track. The bottom version adds a visible drop shadow to the white pill, giving it a lifted, floating appearance.