Catalog
Components
The parts an interface is built from. Each one runs live below, ships its complete source, and installs with a single command.
Catalog
The parts an interface is built from. Each one runs live below, ships its complete source, and installs with a single command.
10 items · 10 free
10 items
Design tokens, motion presets and the shared class-name helper every Forme component builds on.
A user image with a fallback that shows initials while the image loads, and when it never arrives at all. Built on the Radix avatar primitive, so the image and the fallback swap without a flash of empty space.
A small label for status, counts and metadata, in five quiet variants and two sizes. The colour lives in the tint so the text stays readable at eleven pixels, and an icon or a dot inside the badge carries the state at a glance.
The primary action element. Six variants and four sizes, with a loading state that keeps the label in place and the keyboard focus intact.
A bordered surface with a header, title, description, content and footer you compose yourself, so a card is never more structure than the content inside it needs. Everything reads from the foundation tokens, which makes it retheme with the rest of the library.
A command palette opened with ⌘K or Ctrl K, with a search field, grouped items, keyword matching and an empty state. Built on cmdk for the filtering and the keyboard path, inside a Radix dialog for the focus trap.
A modal built on the Radix primitive, so the focus trap, the inert background, Esc to close and the return of focus all come from one well tested place. The overlay fades and the panel scales in, both in and out, and everything comes from the foundation tokens.
A text field with a real label, optional description, an error that is announced and wired up with aria-describedby, and room for an icon on either side. Sizes and the invalid state come from the same tokens as every other Forme surface.
Tabs built on the Radix primitive, so arrow keys, Home and End and the roving tab order come for free. The underline glides to the selected tab with motion and sits still when the reader has asked for reduced motion.
A short description of a control, shown on hover and on keyboard focus, with an optional arrow. Built on the Radix primitive and portalled so a tooltip is never clipped by the toolbar or table it belongs to.