Components
Accessible React components with motion built in. Each page has a live preview, the API, keyboard and screen reader behavior, and how it moves.
Buttons
Actions, groups, menus and confirmations.
- ButtonA clear, responsive action with a loading state, icons, and a label that morphs in place.
- Action buttonA compact button for frequent toolbar actions.
- Split buttonA primary action with a menu of nearby alternatives.
- Button groupRelated actions joined into one surface with hairline dividers: a hover highlight glides between segments, the pressed one answers in place, and an attached menu can close the row.
- Floating button groupSeparate soft buttons in a quiet tray, with one shared highlight that morphs from button to button as you move, and a pressed state that settles in place.
- Expanding button groupIcon buttons in a compact group: the one you point at or focus grows to reveal its label while its neighbours slide aside, and an action confirms in place.
- Copy buttonCopy a value with immediate confirmation.
- Confirm morphA destructive button that morphs into an inline confirmation, a spinner, and a result with undo.
Inputs
Text fields, passwords, search and in-place editing.
- InputA single line field with clear labels and useful states.
- TextareaA multiline field for notes, descriptions, and longer text.
- Password fieldCapture sensitive text with a visible reveal control.
- Password strengthShow how strong a new password is while it is typed.
- Search fieldA recognizable search entry point with clear affordances.
- Expanding searchAn icon that morphs into a search field with results beneath it.
- Inline editRename in place: the text becomes a field without moving.
Special inputs
Numbers, money, phone numbers and tags.
- Number fieldEnter a bounded number with clear increment controls.
- Money inputA currency field with live grouping, stable width, rolling digits, and minor-unit output.
- Phone inputA phone field with a country picker, formatting as you type, and E.164 output.
- Tag inputTurn short text values into removable tags.
Selection controls
Checkboxes, radios, and selects that pick one or many.
- CheckboxA binary choice with a precise, legible state.
- Radio groupChoose one option from a visible set.
- Radio cardsSelectable option cards with a sliding selection ring, price and description slots, and radio keyboard behavior.
- SelectA compact choice field with a keyboard friendly menu.
- Morph selectA select whose trigger grows into the list, with a gliding highlight and type-ahead.
- ComboboxSearch and select from a list without leaving the field.
- Multi-selectSelect several values while keeping the field readable.
- SwitchA tactile toggle for settings that take effect immediately.
- Segmented controlSwitch between a small set of related views.
- Chip groupFilter by a few facets with chips that morph as you pick them.
Navigation
The app shell, tabs, breadcrumbs, search and the account menu.
- App shellThe frame of an application: a sidebar of navigation that folds into a rail, and a top bar for the page title, search and account.
- TabsSwitch between related content in the same context.
- BreadcrumbShow where a page sits in a hierarchy.
- Command paletteA complete keyboard driven action surface with search, grouped results, and shortcuts.
- User menuYour account, settings, theme, and sign out behind the avatar. Opens as a bottom sheet on phones.
Disclosure
Reveal supporting content in place.
Data display
Avatars and badges that label people and status.
Charts
Lines, bars, rings and maps that morph when the data changes.
- Line chartA multi-series line chart with a gliding crosshair, legend toggles, and paths that morph between ranges.
- Bar chartCompare one measure across days and scrub any bar for its value.
- Donut chartA donut whose arcs morph between datasets, with the active value rolling into the center.
- SparklineShow a compact trend beside a value.
- GaugeShow a value against a known range.
- StreamgraphLayered streams on a wiggle baseline that morph between ranges, with a layer you can isolate and read week by week.
- Brush chartA dense time series with an overview strip: drag a window to zoom, resize it by its handles, and read events in place.
- Waffle chartA ten by ten unit chart where every cell is one percent, and cells fly to their new group when the data changes.
- Slope chartBefore and after on two axes: lines draw in, rank moves sit beside each value, and switching datasets slides every line to its new slope.
- Activity heatmapSee a year of activity at a glance, one square per day.
- RidgelineOverlapping distributions, one ridge per group: hover to lift a ridge and read its quartiles, switch datasets and every curve morphs.
- TreemapA squarified treemap: click to drill and the tiles grow to fill the view, with a breadcrumb back and metrics that morph every tile.
Tables and timeline
Sortable records and activity feeds.
Text effects
Reveals, morphs and shimmers for headings and status text.
Cards
Content cards, metrics and empty states.
Messages
Persistent alerts and brief confirmations.
Overlays
Dialogs, drawers, sheets and small floating layers.