adire
github.comUnverifiedrepo only
A themeable component registry for React and Tailwind CSS v4 — install components as source you own and edit.
Items
97
2026-08-18Every entry in its own registry.json, counted last night.Free to install
0
2026-08-18Item endpoints that returned source without credentials.Behind a key
0
2026-08-18Item endpoints that answered 401.Last push
4 days ago
0 stars. Both figures are GitHub's about this repository, not ones this index measured.Components
Search withinFreeits item endpoint answered without a keyPaidits item endpoint answered 401Unverifiedit serves no item endpoint we could ask
| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Accordionaccordion | Disclosure panels built on native <details>/<summary> — keyboard, focus and expanded/collapsed announcement come from the element itself. Data-driven Accordion plus AccordionItem for hand composition; `exclusive` limits it to one open panel using the native name attribute. No client boundary, so an FAQ stays a server component. | Components | Unverified | no deps | |
| Alertalert | Inline message banner — variant × tone, a tone-appropriate icon, optional actions and dismissal. `live` chooses how a screen reader announces it: off for banners already on the page, polite for confirmations, assertive for interrupting errors. Tone is never the only carrier of meaning. | Components | Unverified | no deps | |
| Announcement bannerannouncement-banner | Site-wide notice bar — the first thing on the page, above the header or hero and in normal flow, never over the content. Full-bleed and square so it meets the viewport edges, rendered as a named aside. Text and one action is the whole shape: `href` and `action` are mutually exclusive at the type level, since a button inside an anchor is invalid HTML. `backgroundImage` adds a photo with a scrim and light text. Dismissal is a callback and `open` is the whole state — decide it server-side from a cookie so a dismissed bar never flashes. | Components | Unverified | no deps | |
| Avataravatar | Identity fallback ladder: image → initials → silhouette. Auto tone derives a stable color per name; a failed image falls back to initials automatically. | Components | Unverified | no deps | |
| Avatar groupavatar-group | Overlapping row of faces with a count for the rest — maxVisible decides how many show, and anyone past it becomes that count. A real list, so a screen reader announces every name shown and how many were not: the circle reading "+3" is announced as "3 more", worded through remainingLabel so it can be translated. The ring that cuts each face out of the one behind it belongs to the group, and ringClassName matches it to the surface the group sits on. | Components | Unverified | no deps | |
| Badgebadge | Passive status/count label — variant (solid/soft/outline) × tone, optional status dot. For a clickable pill, use chip. | Components | Unverified | no deps | |
| Breadcrumbsbreadcrumbs | Navigation trail — a nav landmark around an ordered list, last entry marked aria-current="page" and not a link. The chevron mirrors in RTL, separators are hidden from assistive tech, and a long trail scrolls rather than truncating. Pass linkAs to use a router link. | Components | Unverified | no deps | |
| Bullet listbullet-list | Themed bulleted list with tone-colored dots and per-item tone overrides — feature lists, benefit rows. Real ul/li semantics. | Components | Unverified | no deps | |
| Busy overlay (shared)busy-shared | The fetching state DataTable and DataGrid share, which is not loading: what is on screen stays, dimmed and inert, so a refetch or page change never empties the view or lets a reader act on data halfway replaced. Owns the inert subtree, the not-allowed cursor on the layer above it, and a live region that announces the wait from outside the inert content. | Components | Unverified | no deps | |
| Buttonbutton | Polymorphic button — renders an anchor when href is set. Variants, sizes, radius, loading, and a buttonClasses() escape hatch for styling non-buttons. | Components | Unverified | no deps | |
| Cardcard | Composable surface panel — Card plus CardImage, CardHeader, CardTitle, CardDescription, CardBody and CardFooter as separate exports. Sections bleed against a --card-pad token, so a full-width image or a footer rule reaches the card's edge at any size, and overflow-hidden trims them to its radius. variant × tone read as surfaces, so soft + neutral is the house translucent panel. href makes the whole card one link; without href it takes no click handler, since a clickable div is invisible to a keyboard. | Components | Unverified | no deps | |
| Checkboxcheckbox | Native checkbox with label pairing, helper description, indeterminate, tones, and sizes — the engine stays the browser's for free a11y. | Components | Unverified | no deps | |
| Chipchip | Togglable pill button with aria-pressed — filter rows, preset pickers. Quiet until selected; tone shows on selection. | Components | Unverified | no deps | |
| CTA bannercta-banner | Promotional band — heading, supporting line and the actions that follow from it. Built on card, so the surface, padding and radius vocabulary is the one every other panel uses. `align` puts the actions beside the text or stacks them centred; `gradient` adds the ambient glow; `headingLevel` keeps the page outline correct. | Components | Unverified | no deps | |
| Data griddata-grid | Responsive grid of cards — the same rows a data-table shows, presented as cards instead. Owns the auto-fill layout, real list semantics (a named list with each item in a list item), the gap vocabulary, and sensible defaults for fetching: a spinner with a line of text while loading, and a muted line when empty. Both are overridable — renderSkeleton for placeholders shaped like your card, `empty` for your own empty state — and the card itself always comes from renderItem, so no item shape is ever invented for you. | Components | Unverified | no deps | |
| Data tabledata-table | Tabular data in a real table: a caption that names it (hidden by default — a caption is the table's accessible name, not a title), headers scoped to their column, aria-sort on the sorted one, an opt-in row-header column, and a real tfoot for totals. It never sorts and never selects: onSortChange cycles unsorted → ascending → descending → unsorted and onSelectionChange reports intent, so a server-paginated table sorts on the server rather than reordering one page. Selection carries select-all with an indeterminate state, an announced count, and a type that requires a per-row label. rowHref make | Components | Unverified | no deps | |
| Dual toggledual-toggle | Two labeled values with a switch-style track between them (Monthly/Yearly) — radio semantics under a switch look, so it announces as a choice. | Components | Unverified | no deps | |
| Empty stateempty-state | Stands in for content that isn't there — an unfiled list, a search with no matches, a feature not started yet. Owns a soft neutral icon badge (a Lucide inbox by default, replaceable, or droppable), an optional heading promotion, plain/outline/dashed boxes, and the live-region decision for when it replaces content after a fetch. | Components | Unverified | no deps | |
| Error stateerror-state | Stands in for content that failed to load — the fallback you render from an error boundary, not the boundary itself (Next.js generates one per route segment in error.tsx; pass its reset as onRetry). Owns a danger icon badge, the retry button, a native disclosure for the stack or request id, and a polite live region by default. | Components | Unverified | no deps | |
| External linkexternal-link | Offsite anchor: new tab, rel hardened against tab-napping, screen-reader new-tab note, optional RTL-flipping arrow. | Components | Unverified | no deps | |
| Gradientgradient | Token-driven decorative gradient — linear/radial/conic, role-named presets, custom stops, and clipText for gradient headings. | Components | Unverified | no deps | |
| Icon badgeicon-badge | Tinted tile wrapping an icon — feature lists, stat cards, empty states. Decorative by default; label it when it carries meaning. | Components | Unverified | no deps | |
| Icon buttonicon-button | Square button for a single icon — composes buttonClasses so it always matches Button; the required label is the screen reader's text. | Components | Unverified | no deps | |
| Imageimage | Framework-agnostic image with aspect presets, loading shimmer, and a failure fallback — never a broken-image glyph. | Components | Unverified | no deps | |
| Inputinput | Text field with label, helper/error wiring (aria-invalid + aria-describedby), start/end adornments, and the Button height ladder. | Components | Unverified | no deps | |
| Labellabel | Field caption for hand-composed layouts — required marker, end hint, the size ladder. Input/Checkbox embed their own. | Components | Unverified | no deps | |
| Linklink | The one seam every internal link in the library routes through — Button, IconButton, Card, Breadcrumbs and TabsNav all render it. Point its default at next/link once and the whole set follows, instead of passing a router link at every call site. A plain <a> to an internal route costs a full page reload; offsite destinations use external-link, where a router adds nothing. | Components | Unverified | no deps | |
| Loading stateloading-state | Stands in for content still being fetched: a spinner in a polite live region with a label you can announce without showing. Owns the delay — nothing renders until it elapses, so a fetch that resolves quickly never flashes a spinner. For placeholders shaped like the content, use Skeleton instead. | Components | Unverified | no deps | |
| Overlayoverlay | Fixed viewport scrim behind modals and drawers — theme-tinted via --overlay, on the z-overlay rung, presentation only. | Components | Unverified | no deps | |
| Paging (shared)paged-shared | The paging DataTable and DataGrid both run on: the usePaging hook (uncontrolled by default, controlled when the server pages, with the page clamped so a shrinking list never leaves you past the end) and the PageBar it renders — the item count, the rows-per-page control, and the Pagination block. Installed with either; not meant to be used directly. | Components | Unverified | no deps | |
| Paginationpagination | Page navigation: a nav landmark around a list of pages, the current one marked aria-current="page". Owns the page window (boundaries, siblings and an ellipsis for each elided stretch), dead-end edges that stop being controls, three UI shapes — numbered pages, chevrons around a summary for narrow screens, and worded Previous/Next for prose, and RTL-aware chevrons. Real links via href — pages are addresses — or buttons via onPageChange, never both: the type forbids it. It paginates nothing itself. | Components | Unverified | no deps | |
| Progress barprogress-bar | Determinate or indeterminate progress with real progressbar semantics — tone-matched track and fill, value clamping, optional percentage. | Components | Unverified | no deps | |
| Radioradio | Native radio + RadioGroup with fieldset/legend semantics, group-level value control, tones, and sizes. | Components | Unverified | no deps | |
| Segmented controlsegmented-control | A row of mutually exclusive options — sort orders, filters, view modes. Real radios in a fieldset, so arrow keys work, the group is announced with its legend, and it submits inside a plain form. Selected styling is peer-checked:, so the uncontrolled version needs no JavaScript. For two options with a track use dual-toggle; for switching content panels use tabs. | Components | Unverified | no deps | |
| Selectselect | Native select with Input's anatomy — label, helper/error wiring, the height ladder, own chevron that sits at the reading end. Custom pickers are the blocks-tier Dropdown. | Components | Unverified | no deps | |
| Separatorseparator | Token-colored dividing line — horizontal, vertical, or labeled (the OR divider). Decorative by default; opt into the separator role for real structure. | Components | Unverified | no deps | |
| Skeletonskeleton | Loading bones over the shimmer utility — text/circle/rect shapes, multi-line text stacks, hidden from assistive tech. | Components | Unverified | no deps | |
| Spinnerspinner | The one loading spinner — current-color by default for embedding; label it (role=status) when standalone. | Components | Unverified | no deps | |
| State panel (shared)state-shared | The shape EmptyState, LoadingState and ErrorState share: media, title, description and actions in one stack, with the size, alignment, variant and radius vocabularies, and the live-region decision. Installed with any of the three; not meant to be used directly. | Components | Unverified | no deps | |
| Stepperstepper | Progress through a flow: an ordered list of finished, current and upcoming steps, the current one marked aria-current="step", every state announced in words so the tick and the ring are never the only cue. Horizontal or vertical, read-only by default; pass onStepChange or href and finished steps become controls and the list becomes a nav landmark. | Components | Unverified | no deps | |
| Swatch pickerswatch-picker | Color-coding picker over the decorative tint tokens — picks survive theme swaps; click the selected swatch to clear. | Components | Unverified | no deps | |
| Switchswitch | Toggle switch over a real checkbox — role=switch semantics, tones, sizes, RTL-mirroring thumb travel. | Components | Unverified | no deps | |
| Tabstabs | Tabbed panels following the ARIA tabs pattern — roving tabindex, arrow keys with wrap, Home/End, and automatic or manual activation. Panels stay in the DOM so aria-controls resolves and form state survives a switch. Horizontal or vertical, with the indicator on a logical edge so RTL needs no special case. For choosing a value rather than revealing a panel, use segmented-control. | Components | Unverified | no deps | |
| Tabs — navigationtabs-nav | Tabs that navigate: the same strip as tabs, but a nav landmark of links with aria-current="page" rather than the ARIA tabs pattern — a link that changes the route is navigation, and role="tab" would promise a panel that never appears. Needs no client boundary, so it can sit in a server layout. Pass linkAs to use a router link. | Components | Unverified | no deps | |
| Tabs — shared striptabs-shared | The tone/size/orientation vocabulary and class builders shared by tabs and tabs-nav, plus TabLabel, which reserves the selected weight's width so bolding the active tab shifts nothing. Installed automatically by either one. | Components | Unverified | no deps | |
| Tagtag | Categorical label — keywords, applied filters, assignees. Optional leading icon and remove button whose name includes the tag text. | Components | Unverified | no deps | |
| Textareatextarea | Multi-line field with Input's anatomy plus optional auto-grow (bounded by maxRows) and a character counter. | Components | Unverified | no deps | |
| Theme scripttheme-script | Sets [data-theme] before first paint so dark-mode visitors never see a white flash; ships applyThemeMode for the runtime toggle. | Components | Unverified | no deps |
Utilities
Search within| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| cncn | Class-name merge with Tailwind conflict resolution (clsx + tailwind-merge). | Utilities | Unverified | 2 deps |
Other
Search within| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Accordion — Storybook storyaccordion-story | Optional: the Accordion story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Alert — Storybook storyalert-story | Optional: the Alert story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Announcement banner — Storybook storyannouncement-banner-story | Optional: the AnnouncementBanner story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Avatar group — Storybook storyavatar-group-story | Optional: the AvatarGroup story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Avatar — Storybook storyavatar-story | Optional: the Avatar story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Badge — Storybook storybadge-story | Optional: the Badge story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Breadcrumbs — Storybook storybreadcrumbs-story | Optional: the Breadcrumbs story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Bullet list — Storybook storybullet-list-story | Optional: the BulletList story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Button — Storybook storybutton-story | Optional: the Button story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Card — Storybook storycard-story | Optional: the Card story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Checkbox — Storybook storycheckbox-story | Optional: the Checkbox story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Chip — Storybook storychip-story | Optional: the Chip story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| CTA banner — Storybook storycta-banner-story | Optional: the CtaBanner story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Data grid — Storybook storydata-grid-story | Optional: the DataGrid story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Data table — Storybook storydata-table-story | Optional: the DataTable story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Dual toggle — Storybook storydual-toggle-story | Optional: the DualToggle story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Empty state — Storybook storyempty-state-story | Optional: the EmptyState story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Error state — Storybook storyerror-state-story | Optional: the ErrorState story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| External link — Storybook storyexternal-link-story | Optional: the ExternalLink story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Gradient — Storybook storygradient-story | Optional: the Gradient story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Icon badge — Storybook storyicon-badge-story | Optional: the IconBadge story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Icon button — Storybook storyicon-button-story | Optional: the IconButton story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Image — Storybook storyimage-story | Optional: the Image story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Input — Storybook storyinput-story | Optional: the Input story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Label — Storybook storylabel-story | Optional: the Label story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Link — Storybook storylink-story | Optional: the Link story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Loading state — Storybook storyloading-state-story | Optional: the LoadingState story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Overlay — Storybook storyoverlay-story | Optional: the Overlay story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Pagination — Storybook storypagination-story | Optional: the Pagination story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Progress bar — Storybook storyprogress-bar-story | Optional: the ProgressBar story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Radio — Storybook storyradio-story | Optional: the Radio story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Segmented control — Storybook storysegmented-control-story | Optional: the SegmentedControl story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Select — Storybook storyselect-story | Optional: the Select story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Separator — Storybook storyseparator-story | Optional: the Separator story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Skeleton — Storybook storyskeleton-story | Optional: the Skeleton story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Spinner — Storybook storyspinner-story | Optional: the Spinner story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Stepper — Storybook storystepper-story | Optional: the Stepper story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Stylesstyles | The house stylesheet structure — globals.css importing themes.css (the active theme selector), overrides.css (project tweaks that survive theme switches), base, typography, forms (native controls on brand), animations, utilities, and components. Defaults to the lilac theme; name another in the same command to start with it instead: `add @adire/styles @adire/theme-ocean`. | Other | Unverified | no deps · 10 files | |
| Swatch picker — Storybook storyswatch-picker-story | Optional: the SwatchPicker story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Switch — Storybook storyswitch-story | Optional: the Switch story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Tabs navigation — Storybook storytabs-nav-story | Optional: the TabsNav story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Tabs — Storybook storytabs-story | Optional: the Tabs story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Tag — Storybook storytag-story | Optional: the Tag story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Textarea — Storybook storytextarea-story | Optional: the Textarea story with interaction tests, for projects that run Storybook. | Other | Unverified | no deps | |
| Theme: Embertheme-ember | Warm terracotta on sandstone neutrals. Installs themes/ember.css and points themes.css at it. | Other | Unverified | no deps · 2 files | |
| Theme: Lilactheme-lilac | Muted purple on lilac neutrals — the default theme. Installs themes/lilac.css and points themes.css at it. | Other | Unverified | no deps · 2 files | |
| Theme: Oceantheme-ocean | Cool teal on sea-glass neutrals. Installs themes/ocean.css and points themes.css at it. | Other | Unverified | no deps · 2 files | |
| Theme: Slatetheme-slate | Steel-blue ink on cool graphite neutrals. Installs themes/slate.css and points themes.css at it. | Other | Unverified | no deps · 2 files |
Put this measurement in your README
A badge carrying how many items this registry publishes, enumerated nightly from its own registry.json. It reads from this index every time somebody loads your page, so it changes when the measurement changes and there is nothing to keep up to date. Free, no account, and the value is not something you or we can set by hand.
[](https://blockdex.kynth.studio/registries/adire)Would rather not hotlink us? Every badge is also served in shields.io’s endpoint schema, so shields renders the image and your readers never talk to our domain:
Published by Toolproof, the masthead over this index and eight others. The method behind the number is at toolproof.kynth.studio/methodology, and the whole thing is readable as JSON with no key at /api.
