Accessible React components with motion editions, plus free blocks for dashboards and landing pages. MIT.
The full Dashral color theme for light and dark mode. Every text pairing meets WCAG AA.
A full-featured table built on TanStack Table v9: search, faceted filters, sorting, column visibility, row selection, pagination and CSV or Excel export.
A button that opens a calendar in a popover.
Pick a start and end day on a two-month calendar, or from shortcuts like “Last 7 days”.
Terms and their values: a record's details, a summary, an invoice's totals.
A modal window that focuses the user on a single task.
Dialog with motion: it grows out of the button that opened it, shrinks back into it as it closes, glides to a new height when its content changes, and swipes down to close on a phone.
Parts of a whole as a ring, with a legend of every value and share. Plain SVG, no chart library.
A menu of actions or options, opened by a button.
DropdownMenu with motion: it springs out of its trigger, its items rise in one after another, and one highlight glides from item to item after the pointer or the arrow keys.
Text you click to change in place: a name, a title, a label.
What a page, list or table shows when there's nothing in it yet — and the next step to take.
Export rows as CSV or Excel (.xlsx), in the browser and with no library: a CSV writer, a small .xlsx writer (the
Short answers in two columns to scan without clicking, and a line to the help center.
The heading and a contact card beside an accordion of answers; stacks on phones.
One large story at a time with the number it changed, arrows and dots, and the customers' logos below.
Tiles of two sizes, each showing the feature in miniature: a live chart, the team, sources and an alert switch.
Six features with an icon, a title and one sentence each, in three columns, then two, then one.
A label, a hint and an error around a form control, with the ids and aria attributes wired up.
Drop files or browse for them, with type, size and count checks and a list of what was picked.
Files picked in a form: their size in words, whether a file is accepted, and a small preview. FileDropzone and
One group of a settings page: a title and description beside its fields.
One value within a range as a half ring — a score, a quota or a target. A meter for assistive technology.
Steps to a working setup with progress and time left; the next step unfolds, and finishing celebrates.
Activity per day as a calendar grid of weeks, like a contribution graph. Plain SVG.
A preview that opens when a pointer rests on a link — a person, a ticket, a page.
A dot or a count on the corner of a button, an avatar or a tab.
A text field for forms and search.
Formatting as you type, with no library: card numbers in groups, phone numbers, dates, expiry dates, times,
Input with motion: a short shake when it turns invalid, and its error message grows in under the box and folds away when it's fixed.
A one-time code in boxes, one character each: typed, pasted or filled from a text message.
InputOTP with motion: each character pops into its box, the focus glides from box to box, an error shakes the row and a full code ripples.
JSON to read and explore: folding objects and arrays, colored values, copy.
A key or a shortcut as on a keyboard: ⌘ K on a Mac, Ctrl K elsewhere, read out as words.
Kbd with motion: its keys press in as you hold the real ones on your keyboard.
A grid of pictures that opens each one large, with arrows, swipes and captions.
Values over time as lines, with dashed ones for a target or last year; the axis fits the values so changes show. Plain SVG.
Rows of people, files or things: a picture, a title, details and actions.
The language and reading direction the components speak: their built-in words ("Search…", "Rows per page"), the
Items that scroll on their own and loop without a seam: logos, testimonials, integrations, a news or price ticker — sideways or up.
The row of menus along the top of an app: File, Edit, View.
One message in a conversation with an AI assistant, with a cursor while it streams and Copy, Regenerate and feedback under it.
One number that matters, with its change against a past period and room for a sparkline.
The description and error every motion form control shows: an error grows in under the control and folds away.
Entrance motion shared by dashboards: things on a page arriving one after another. Each class is a full Tailwind
The hover highlight motion menus, selects, tabs and segmented controls share: one pill, gliding without a blink.
A number on odometer wheels, as the motion NumberInput and Slider show their values: each digit turns as far as it
Whether to keep still, as the kit decides it: the OS asks for less motion, or the app turned motion down with