Toolkit with accessible components, styles, and examples for your next web app
- Tweets 556
- Following 4
- Followers 2,569
- Likes 764
ALT Diagram illustrating component composition for various button styles. 1. Top Center: A simple "Button" rendered with `<Button>Button</Button>`. 2. Top Left: A square button with a plus icon, using `<ButtonIcon>` and screen-reader text. 3. Top Right: A white pill button "+ Follow back" using props `$bg="invert" $radius="round" $px="xl"`. 4. Center Left: A badge-style button "Technology 43" with a computer icon and a count span. 5. Bottom Left: A "Following" button with a checkmark icon using `$radius="round"`. 6. Bottom Right: A large profile button for "Haz @diegohaz" demonstrating complex layout with `$orientation="vertical"`, `$rowSpan`, and nested content (image, label, description, icons).
` and ``.
- Visual Output: Arrows point from the code to two versions of the "ariakit" logo—one optimized for a dark background (white text) and one for a light background (black text).](/pic/orig/media%2FG_Ckgbna4AE4lIx.jpg)
ALT Instructional diagram about adaptive images on GitHub. - Method 1 (HTML): A code snippet using `<picture>` with `<source media="(prefers-color-scheme: light)" ...>` and a corresponding dark version. - Method 2 (Markdown): Code snippet showing `` and ``. - Visual Output: Arrows point from the code to two versions of the "ariakit" logo—one optimized for a dark background (white text) and one for a light background (black text).
ALT A 2x2 grid showcasing different designs for a "Delete" button. The top left shows a dark-mode ghost style with orange text. The top right is a light-mode outlined style with dark red text. The bottom left features a solid bright red button, while the bottom right shows a solid dark maroon button.
ALT Infographic titled "CSS 🤝 Math" demonstrating algorithmic design. - Top: A rendered "Technology" button with a white checkmark icon. - Bottom: An annotated version of the same button showing the underlying CSS logic. - `--py: 0.875em` (vertical padding) is the single source of truth. - `--px` (horizontal padding) is derived via: `calc(var(--py) + (1lh - 1cap)/2)`, where `1lh` is line-height and `1cap` is cap-height. - The icon's size is set to `1lh`. - The icon's right margin is adjusted with: `calc(var(--py) - var(--px))` to visually center the icon relative to the text and padding.
ALT A UI kit display showing different states of a "Programming" choice chip. It includes unselected states with empty circular checkboxes, selected states with blue checkmarks and borders, variants with icons on the right, and different layout alignments (checkbox on left vs right).
ALT A UI mockup showing three variations of a selection card labeled "Programming." Each card contains a checkbox, a title, a description, and a small icon. The top card is unselected (dark grey). The middle card is selected (highlighted in blue with a checked box). The bottom card is disabled (content appears dimmed or faded).
ALT A step-by-step visual guide on styling a UI badge. It starts with a solid green "Success" badge, transitions to a blended dark background, highlights the text in green, adds a checkmark icon, and finally repositions the icon using "negative margin-inline-start" for better alignment.
ALT Weekly downloads chart showing 505,108 with an upward trend
ALT Screenshot of a GitHub Sponsors message with the Octocat logo and the headline “You have a new sponsor!” The line below says “@thnxdev is now sponsoring @ariakit for $219.00 one time!”
