rei-kit — 106 accessible Vue 3 and Tailwind 4 components

All 106 components

• ActivityGrid — A year of days, as a grid you can read at a glance.
• AnnounceHost — The two live regions announce() speaks through. Render one per app, anywhere — nothing here is ever visible.
• AuthForm — The sign-in and sign-up forms, which are one component.
• AuthShell — The frame every sign-in screen sits in.
• AvatarStack — The people on a thing, overlapped: who is in a conversation, who shares a list.
• BarChart — A row of values, compared.
• BaseAccordion — A list that opens one section at a time.
• BaseAlert — A message the reader has to take in before carrying on.
• BaseAvatar — The person, in the corner where the account lives.
• BaseBadge — A small standing label: a level, a state, a count.
• BaseBreadcrumb — Where this page sits, and the way back up.
• BaseButton — The kit's button, and — when asked — its link.
• BaseCalendar — A month of days, for choosing one or a stretch of them.
• BaseCard — A surface with a border, and optionally a head and a foot.
• BaseCheckbox — A single checkbox, with its label beside it.
• BaseCheckboxGroup — Several answers from a set that is all on screen.
• BaseChip — A short label with, when it is one of a set someone assembled, a way to take it off: a filter, a recipient, a tag.
• BaseCombobox — A field you type into to narrow a list, then choose from it.
• BaseContextMenu — The menu a right-click opens, on whatever it was opened over.
• BaseDatePicker — A date, or a stretch of dates, chosen from a calendar in a popover.
• BaseDisclosure — One section that opens and closes.
• BaseDrawer — A panel that comes in from the edge of a wide screen.
• BaseHoverCard — A card that appears beside something when you rest on it.
• BaseInput — A text field with its label, hint and error already wired to it.
• BaseKbd — A keyboard key, or a chord of them: ⌘ K, Ctrl Shift P.
• BaseLink — A link in a sentence — the one thing a button is not.
• BaseListbox — A list you choose from, open on the page.
• BaseMarquee — A row that scrolls sideways without end: logos, testimonials, a ticker.
• BaseMenu — A list of actions behind one control.
• BaseModal — A dialog that arrives from nowhere.
• BasePagination — Moving between pages of a list.
• BasePopconfirm — "Are you sure?", asked beside the button that asked it.
• BasePopover — A panel of anything — a form, a picker, a few settings — anchored to the control that opened it.
• BaseRadioGroup — A set of radios, and the reason there is no BaseRadio.
• BaseRating — A score out of five, given or shown.
• BaseReveal — Content that fades or rises into place as it scrolls into view.
• BaseSelect — A native <select>, wearing the kit's field.
• BaseSeparator — A line between things — with, when it helps, a word on it.
• BaseSheet — Pins the sheet to the area the keyboard has left visible.
• BaseSkeleton — One grey box standing in for content that has not arrived.
• BaseSlider — A value picked from a range, where roughly right is the point.
• BaseSpinner — Work in progress, with no idea how much is left.
• BaseSplitter — Two panes and a handle between them — a list beside a preview, an editor beside its output.
• BaseStepper — Where someone is in a process of several steps — a sign-up, a checkout, a form split into pages.
• BaseSwitch — A setting that takes effect the moment it is touched.
• BaseTable — Rows of data, with the parts a hand-written <table> leaves out.
• BaseTabs — Sections of one page, one visible at a time.
• BaseTextarea — A multi-line field.
• BaseTimeline — What happened, in order, on a rail.
• BaseToolbar — A row of controls that belong together: a formatting bar, a row of view switches, the actions over a table.
• BaseTooltip — A short label that appears beside a control.
• BaseTree — A tree of things that contain things: folders, a category list, a table of contents.
• CircularProgress — Progress as a ring — for a small space, a card's corner, a goal.
• CodeBlock — A sample of code, as written.
• ColorPicker — A colour, as a hex value.
• CommandMenu — Everything the app can do, behind one shortcut.
• CopyButton — Copies a piece of text, and says that it did.
• CountUp — A number that counts up to its value once it scrolls into view.
• DataTable — BaseTable with the three things a table of real data grows: a sort, a selection, and something to show while it is loading.
• DescriptionList — Pairs of "what it is" and "what it says": the summary at the top of a detail page, the facts under an invoice.
• DonutChart — Parts of a whole.
• EmptyState — A list with nothing in it yet, said kindly.
• ErrorBoundary — Keeps one broken screen from taking the whole app down.
• ErrorSummary — What a rejected form says at the top of itself.
• FabButton — The one action the app is built around, reachable from every screen.
• FileDrop — Files, dropped on or chosen from a real file input.
• FormField — A label, a hint, an error, and the wiring between them.
• GoogleButton — Sign in with Google, in Google's own clothes.
• InstallPrompt — The card that offers to install the app, and remembers being turned down.
• InstallSettings — The way back to installing after the card has been dismissed.
• LocaleLinks — A flat language switcher for screens with no Settings behind them.
• LocaleSheet — Choosing the interface language, from a settings row.
• MegaMenu — A wide site's navigation, where a section has more in it than a row can hold: columns of links under a heading, opened from the bar.
• NavLinks — The primary navigation of a wide site.
• NumberInput — A number, typed or stepped — a quantity, a price, a count of minutes.
• NumberTicker — A number whose digits roll to their new value, like an odometer or a note counter.
• OfflineBanner — A floating note that the connection has gone.
• PageContainer — One measure, centred, with the page's gutters.
• PageHeader — The bar at the top of a screen: a title with room either side of it.
• PasswordInput — A password field you can look at.
• PinInput — A short code typed one character per box — a sign-in code, a PIN.
• PriceCard — One plan in a pricing table.
• ProgressBar — How far through something somebody is.
• ResponsiveDialog — One question, asked the way the screen it lands on expects: a modal on a wide screen, a sheet from the bottom edge on a phone.
• ScrollArea — A box that scrolls, with the two things a hand-written one leaves out.
• SectionHeading — A pill heading for a group of things.
• SegmentedControl — A row of mutually exclusive choices.
• SettingsGroup — A titled run of settings rows.
• SettingsRow — One line in a settings card.
• SkeletonList — A length starts with a digit, a dot, or opens a CSS function.
• SkipLink — "Skip to content" — the first thing in the tab order, hidden until it has focus.
• SliderField — One number, reached either way: dragged along a range or typed exactly.
• StatCard — One number, with what it means and which way it is going.
• TabBar — The floating bottom bar.
• TabShell — The phone frame the whole app sits inside.
• TagsInput — A field that holds several short values: recipients, labels, skills.
• TextRotate — One word in a sentence that changes on its own: "Build it *glass*", then *brutal*, then *soft*.
• TimePicker — A time of day, chosen from two columns.
• ToastHost — Where the toasts land. One of these, at the app root.
• ToggleGroup — A row of buttons that stay pressed — one at a time, or several at once.
• ToneDot — A small coloured dot, optionally labelled.
• TourShell — The frame an onboarding guide runs inside.
• TransferList — Two lists and the way between them: what is available, what is chosen.
• TypeWriter — Text that types itself out, and — given several lines — deletes each one and types the next.
• UpdatePrompt — The card that says a new version is waiting.
• VirtualList — A long list where only the rows near the viewport are in the DOM.