Accessible React components with motion editions, plus free blocks for dashboards and landing pages. MIT.
Text that morphs into its next state letter by letter: the letters both have glide to their new places, the new ones
The kit's motion tokens for motion/react, which takes numbers, not CSS variables. They mirror globals.css in
Pick several options from a searchable list; the picks show as removable chips.
A styled native <select> — fully accessible and mobile-friendly.
A site's main navigation, with menus that open a panel of links.
An aside in the flow of a page: a tip or a caveat on a calm card, with a breath of its color in the corner.
A number field with − / + steppers, arrow-key steps, limits and locale formatting — and MoneyInput for amounts.
NumberInput with motion: odometer digits that spin as far as the number travelled, steppers that repeat when held, and a limit you can feel: the number strains against it, harder with each push.
Search, payment and fulfillment filters, export and pages; ship selected orders and the rows update in place.
The top of an admin page: breadcrumb, title, description, actions and tabs.
Page navigation with previous/next links and ellipsis gaps.
A phone number with its country, grouped as it's typed and given in international form.
The links in a pill in the middle with a sliding highlight, a GitHub star count, the theme, sign in and the main action.
Rich content in a floating panel, anchored to a trigger.
Popover with motion: it springs out of its trigger from the side it opens on, and glides to its new height when what's inside changes.
Where menus, dialogs, popovers and tooltips put themselves: document.body unless something says otherwise. A themed
Plans compared feature by feature in groups, with hints, the popular column tinted, and actions in the header.
Three plans with a monthly/yearly switch and the saving, the popular plan raised, and what each includes.
Shows how far a task has progressed.
Progress as a ring, for a small space: a file in a list, a quota on a card.
Progress with motion: the bar glides to each value on a spring, runs while the length is unknown, shines when it's done, and can show its percentage on odometer wheels.
Where a message to an AI assistant is written: it grows as you type, takes files, and turns send into stop while the reply streams.
Things to ask in an empty AI conversation: chips, one scrolling row, or cards with an icon and a line.
Good-looking text from the plain HTML that Markdown, MDX or a CMS produces.
A set of options where only one can be selected.
RadioGroup with motion: the dot springs into the radio you pick and shrinks out of the one you left, and with cards the picked frame glides from card to card.
A star rating that works with the keyboard and in forms, and shows an average.
What an AI model thought before it answered, folded under one line: "Thinking…" while it works, then how long it took.
A moment as people say it, "3 minutes ago", in the reader's language and kept current.
A report's title with its live status, a period switcher, a date range, compare and export.
Panels whose sizes you change by dragging the handle between them, or with the keyboard.
Bars for this period and a dashed line for the last, a tooltip on hover or the arrow keys, in plain SVG.
A scroll area whose edges fade while there's more to see, instead of a scrollbar.
A row of options where one is picked, like a view switcher. The highlight slides to the choice.
SegmentedControl with motion: the picked option's card springs to the one you pick, a soft highlight follows the pointer, and options press in while held.
A custom dropdown for choosing one option from a list.
Select with motion: the list springs out of its trigger with its options rising in, one highlight glides between them, and a new value rises into the trigger.
Visually separates content, horizontally or vertically.
Grouped settings with a sliding highlight and the picked section beside them; a select on phones.
A panel that slides in from the edge of the screen.
An app's side navigation: groups of links, sections that open, a sliding current-page highlight, and a collapse to icons.
Sidebar with motion: it springs its width as it folds, the current page's highlight and the hover glide from row to row, and sections open on a gliding height.
Google and GitHub, or email and password with Forgot password, remember me, loading and a wrong-password error.
An email field that checks, works and confirms, the people already in, and a customer's words.
The form with a password strength meter and terms beside a soft blue panel: what you get, the product in miniature, a customer's words.
The logo, the main links and social accounts, then the copyright, legal links and a live system status.
A placeholder shown while content is loading.
Pick a value or a range by dragging a thumb.