A primitive is one control you drop into a form or a toolbar — a segmented control, an input with an addon, a tag field.
The parts between an element and a section
Not another Button. You already have one — what you do not have is the button group with its borders collapsed, the input with an addon on each end, the field that wires a label to a hint to an error, the segmented control that a screen reader can actually read. Every project rebuilds these, and no base library ships them.
Recently added
Nothing new in the last 7 days — this is the most recent
Actions
View all 3Button Group
Buttons joined into one control, with collapsed borders, logical end rounding and a focus ring that paints above its neighbours instead of being clipped by them.
Social & Login Buttons
Google, GitHub, Apple and Microsoft with their real marks drawn as inline SVG — no icon package, no brand-guideline violation, and the "Continue with" wording that works for sign-up and sign-in at once.
Form Controls
View all 7Field
The label, hint, error and aria wiring around one input — including the part that is usually wrong, where the hint has to stay in aria-describedby once an error joins it.
Input Group
An input with addons, an inline icon or an action button attached, with the padding reserved for the icon and the focus ring on the whole group rather than its middle third.
Verification Code Input
Six boxes that handle the interaction that actually happens: a pasted code distributes from the first box whichever one was focused, and backspace in an empty box steps back and clears.
Number Stepper
A quantity control that is not input[type=number] — so no unstyleable spinner, no accepted "e", and no clamping mid-keystroke that rewrites your 2 to a 10 before you can type the 5.
Keyboard Key
A shortcut written once as "mod+k" and rendered for the keyboard it will be typed on — ⌘ on Apple, Ctrl elsewhere — with the symbols hidden from screen readers behind a spoken name.
Switch
An on/off setting that takes effect now, as role="switch" so a screen reader says "on" rather than "checked" — with the label and description in one row, a clickable label, and an off state dark enough to pass 3:1.
Range Slider
Two thumbs on one track, built from two native range inputs so the keyboard, touch dragging and announced values come free — with the thumbs prevented from crossing and the min thumb still reachable at the far end.
Selection
View all 5Segmented Control
Pick exactly one, built as a radio group rather than three buttons, so a screen reader says which is chosen — with a sliding indicator that animates one transform instead of repainting backgrounds.
Emoji Reactions
A reaction row where each pill is a toggle that says whether you are one of the count, plus a short picker — announced with names, since "👍 3" is read as a shrug by a screen reader.
Radio Card Group
Plans and shipping methods as cards, built on real radio inputs so the arrow keys, "2 of 3" and form submission are the browser's — with selection drawn as a tick, not only a colour.
Status & Labels
View all 4Badge
Six semantic tones across three shapes, kept as separate axes — so a red outline badge is something you can ask for rather than something the variant list forgot.
Status Badge
A dot and a word, with no icon-only mode by design — one in twelve men cannot separate the red state from the green one, so the word is structural rather than optional.
Tag Chip & Input
Removable tags and the field that makes them, including the part nobody does: after removing a chip, focus moves to the next one instead of falling to the top of the document.
Skeleton
Shapes that match what replaces them, so the page does not jump when data lands — and a group wrapper that announces "loading" once instead of describing six grey rectangles.
Progress Steps
An ordered list in a nav, not a row of divs — so the count and the position come free, and aria-current names the step you are on. Horizontal and vertical, because four labels do not fit on a phone.
Tree View
One tab stop for the whole tree, with the ARIA tree keyboard contract in full — including typeahead and the arrow keys mapped through the reading direction.
Tabs
One tab stop for the whole list, arrow keys mapped through the reading direction, and a manual-activation mode so arrowing past five expensive panels does not fire four requests nobody asked for.
Breadcrumbs
The trail back up, with the current page as text rather than a link to itself, and a long middle that collapses to a button that announces what it hides and hands focus to the first revealed crumb.
Pagination
A page window that keeps its width while you page and never draws an ellipsis for a single page — as real links when you pass getHref, so a listing stays crawlable and works without JavaScript.
Accordion
Buttons inside real headings, with panels that stay mounted so aria-controls resolves and go inert when shut so Tab cannot walk into invisible content — animated by a grid-row transition, off under reduced motion.
Overlays & Feedback
View all 4Alert
An inline message that is not a live region by default — an alert role interrupts a screen reader, which is wrong for a notice that is simply on the page — with a `live` switch for the ones that appear in response to something.
Dropdown Menu
An action menu with the menu keyboard model in full: arrows, Home/End, typeahead, and Escape that returns focus to the trigger rather than dropping it on the page body. Its limits — no collision flip, no portal — are stated in the header.
Dialog
A modal on the native dialog element, which supplies the focus trap, inert background and top layer — plus the parts it does not: scroll lock that survives two dialogs, backdrop click, and an alertdialog that ignores it.
Tooltip
Dismissible with Escape, hoverable, and persistent — the three things WCAG 1.4.13 asks of content on hover — shown on keyboard focus rather than every click, and wired with aria-describedby so it is announced even when it is not drawn.
Identity
View all 2Avatar Group
Overlapping faces with a descending stack order, deterministic colours for initials, and an overflow chip announced as "and 3 more" rather than an ambiguous +3.
Featured Icon
The glyph-in-a-tinted-box that every feature grid and empty state is built from, in five tones and four treatments — decorative by default, because it sits next to a heading that says the same thing.
Pickers & Media
View all 6Color Picker
A swatch grid as a radio group, a hex field that accepts what people actually paste and normalises on blur, and the native picker as the escape hatch.
Gradient Picker
Draggable stops with pointer capture, an angle, and the CSS it produces shown and copyable — with the stop list kept sorted, because an unsorted linear-gradient is not an error, it just renders wrong.
Image Picker
A drop zone that counts drag events instead of flickering on every child boundary, validates on drop where the accept attribute does nothing, and revokes its object URLs.
Credit Card Input
Brand detection, per-brand digit grouping and CVC length, a Luhn check that catches a transposed digit before the network declines it, and the autocomplete tokens that make a card actually autofill.
QR Code
A real, scannable symbol with no dependency — Reed-Solomon over GF(256), block interleaving and all eight masks scored by the standard penalty rules. Byte mode, level M, up to 213 bytes.
Video Player
Custom controls that keep what the native ones gave you: YouTube key bindings, a real range input for scrubbing, and the buffered range painted behind the played one.
Date & Time
View all 5Calendar
A real `role="grid"` month rather than 42 tab stops — one tab stop, arrows for days, PageUp/PageDown for months, and six rows always, so paging never changes the height of what sits below it.
Date Picker
The typing half most pickers drop, attached to the calendar: parses on blur, refuses to guess whether 3/4 is March or April, and leaves what it cannot read in the box instead of clearing it.
Time Picker
Slots at a fixed step with the taken ones struck through and the time zone rendered beside the value — the three things a booking needs and a native time input cannot say.
Relative Time
A real `<time>` that says "3 hours ago" and cannot mismatch on hydration: both sides render the absolute date first, and the relative wording only arrives in an effect. Ticks at an interval scaled to its own age.
Duration Input
Three segments that behave like one field — typing past one advances, Backspace on an empty one goes back, arrows carry 59 minutes into the next hour, and pasting `1:30:00` fills all three.
AI & Chat
View all 7Message Bubble
One turn in a thread, with the part every chat UI leaves out: the speaker is in the text rather than implied by which side the bubble sits on, so a screen reader hears a conversation instead of an unattributed monologue.
Prompt Input
The composer, reduced to the four things that are actually hard: Enter that does not fire mid-IME-composition, one submit path for button and keyboard alike, stop as a separate button from send, and a row cap measured from the real line height.
Reasoning Panel
The "Thought for 12s" disclosure, built on a native details element — so it keeps its state without JavaScript, needs no ARIA at all, and renders on the server in the same pass as the answer above it.
Citation Chip
A numbered source reference whose accessible name is the source rather than the numeral — because eight links all called a digit cannot be told apart in a screen reader link list, which is how many people navigate a page.
Typing Indicator
Three dots that stop moving for anyone who asked their OS for less motion, and a polite live region that says who is typing — so the information was never carried by the animation in the first place.
Prompt Suggestions
The starters that fill an empty thread, as a real list of real buttons rather than the usual grid of clickable divs — reachable by keyboard, skippable in one keystroke, and named for the prompt they actually send.
Structure
View all 1Content Divider
A rule with a label on it, built from two growing flex children — so it needs no background colour behind the text and does not break the moment you put it on a card.
Frames & Mocks
View all 4Browser Frame
Desktop browser chrome that wraps whatever you put inside it — a screenshot, a video, or the live component itself. Three variants, no image asset, and the window controls are grey rather than a copy of one vendor’s.
Phone & Tablet Frame
One handset bezel with the cut-out as a prop, so iPhone, Android and tablet are three settings rather than three assets. Status bar and home indicator included, and the clock is a prop so it can never be a hydration mismatch.
Laptop Frame
A lid, a hinge and a tapered base, with the taper done by clip-path rather than the border trick that cannot round or carry a background. Degrades to a boxier laptop where clip-path is missing.
Device Showcase
The product-hero arrangement: a handset overlapping a laptop, overlapped with a negative inline-start margin so both stay in flow and the group keeps an honest height. Stacks below sm instead of shrinking to nothing.