An achromatic design system on Base UI: the standard parts plus playful niche components, with semantic tokens that match Figma variables one to one.
Asks for a decision before something that can't be undone, with Cancel focused and no click-outside dismiss.
Hand-drawn marks on a word or phrase, from underlines and circles to a highlighter, plus sticker chips that can cycle through words.
A workspace app's frame: a header with Command menu on Cmd+K, pages for home, projects and an inbox, and Floating nav to move between them.
One added file as a chip or an image thumbnail, with its upload status and buttons to remove or retry.
A person's photo, or their initials when there's no photo.
A short label for status, category or count.
Triggers an action or event on click.
A month grid for picking a day or a range, with full keyboard use; pages side by side, scrolls on phones, or fills a page with a month of events.
A rail of marks that swell under the pointer like the Dock, previewing the chapter at the crest.
A message box built from parts around one draft, with attachments, native emoji, dictation, suggested replies and slash commands in the Command menu.
Turns a single option on or off, or picks many from a list.
A Cmd+K palette with nested pages, recent commands, ranked search and a preview pane.
A number at a glance: capped at 99+, shortened to 1.2K or signed as +4, read out in full.
A table for lists people work through, on TanStack Table: sorting, search, filters with counts, pages, selection, cell types, locked rows and pinned columns.
A field that opens a calendar to pick a day, or a range with presets and Apply; a popover on desktop, a drawer on phones.
A window over the page for a short task, such as editing a few fields, that keeps focus until it's done or dismissed.
Wraps an area people can drop files onto, with an overlay while they drag and files split by type.
A flat, ledger-like theme: a sage page, white cards, ink buttons and one yellow highlight on whatever is selected. Applies under data-theme="electrical", in light and dark. Uses Inter Tight, which your app loads.
What shows where content would be: a title, why it's empty, and what to do next.
A label, description and error wired to one form control, with a group that sets the size of a whole form.
A filter menu of fields and values that turns into a search as you type.
A pill of destinations floating above the bottom of a phone screen that steps aside on scroll.
A single line of free text.
An input with an icon, text or button beside it, drawn as one field.
A hub and the tools wired into it, with pulses along the routes.
Takes people to unread messages, new messages or the present in a conversation.
Shows a key or a keyboard shortcut in text.
Names a form control and widens its hit area.
A pin for a point on a map, with a preview that opens on click or tap.
A warm, tactile theme: a beige page, a terracotta primary, and raised controls that press onto a solid bottom edge like keys. Applies under data-theme="mechanical", in light and dark. Uses IBM Plex Sans, which your app loads.
A short list of actions that opens from a button.
A conversation that groups each person's messages under one heading, with a single tab stop.
Moves through a long list one page at a time.
A one-color pixel snail that crawls on a loop while something loads.
Shows how far a task has got, or that it's under way.
Picks exactly one option from a short list.
Emoji responses to content, in one tap.
Formatted writing on Tiptap: headings, marks, lists, quotes and links from a toolbar or Markdown shortcuts, with an optional character limit.
A search box with a Cmd+K shortcut and a clear button, and a compact trigger for a header whose search opens in a command menu.
Picks one option from a list that opens on demand.
A thin rule between groups of content, across or down, with an optional label.
A settings screen in tabs for profile, notifications and account, with a save bar that appears on change and a confirmed danger zone.
A panel that slides in from an edge for a focused task.
A human-readable sitemap: a location search, popular picks, and every destination grouped by job, in columns that fold to cards on a phone.
A placeholder in the shape of content that's still loading.
Picks a number, or a range, by dragging along a track.
A small mark for whether someone is present, away or offline, told apart by shape.
An avatar cut out like a die-cut sticker, with a paper edge that follows its shape and a status told by shape.