Copy-paste blocks for your app
Ready-made UI components and the design system behind them — color, type, spacing, and parts in one set. Copy it into Claude, Cursor, or Lovable and your AI-built app looks designed, not generated.
Ready-made components built on the design system below. Filter by category, open one to preview it, and copy the markup straight into Claude, Cursor, or Lovable.
Trigger an action such as submitting a form, opening a dialog, or moving to the next step.
Group related buttons so a primary and secondary action read as one control.
Make text interactive for navigating to another page or performing an action.
Let people enter or edit text within a single-line input.
Collect longer, multi-line text such as a description or a note.
Let people enter search terms in a single-line input.
Inform people about the status of a resource or that an action completed.
Label, organize, or categorize content with a compact keyword.
Group related content on a surface with system border, radius, and padding.
Create a clear visual separation between elements.
Organize content into responsive rows and columns.
Stack elements vertically with consistent rhythm from the spacing scale.
Show a person's initials or image in a compact, rounded element.
Frame an icon on a system surface to anchor a feature or list row.
Render a hierarchical title that communicates page structure.
Label a section with a small mono caption above the heading.
Open a section with a larger intro paragraph that sets context.
Eight semantic roles power every section. Switch to Dark or Color mode in the section preview to see the same roles re-mapped — the accent only appears in Color mode.
Install once — every section you add inherits it. Copy a Claude prompt, CSS variables, or a Tailwind theme.