A collection of customizable UI blocks with interactive live previews
Each trigger sits on a muted, rounded background.
Grouped toggle button filters for status and priority, with reset and apply actions.
No corner close button; dismiss only through the footer.
Labelled fields above a submit button placeholder.
Build an invoice while a dialog validates each line item against its own schema.
Build an invoice while a dialog validates each line item against its own schema.
Dialog triggered by a DropdownMenuItem with onSelect preventDefault.
A grid of square image tiles for a loading gallery.
Borderless minimal rows with an active color on open.
Rich search dialog with recent, pages, and people plus a hint footer.
Overlapping AvatarGroup stack of members.
Grouped list of notification checkboxes, each with a label and helper description, inside a labelled fieldset.
Multiple rows grouped together with thin dividers between each row.
Multiple labeled groups divided by separators.
Options organized into labeled groups.
Options split into labeled groups with separators, demonstrated with timezones organized by region.
Overlapping group with a +N count for the remaining members.
Merged-border button row where one step is visually disabled and non-interactive.
Hover each avatar in the group to reveal its name.
Three bars morph into an X on press.
Status badge above the title and a metadata row below the description.
A centered serif hero with a soft gradient wash, pill CTA, and a floating integration cloud.
A left-aligned serif hero with a media panel: an image backdrop with a floating dashboard mockup on top.
A centered hero with dual CTAs and an image that fades into the page below the copy.
A two-column editorial hero with a soft background wash and a layered collage of two overlapping images.
An editorial hero with a left tagline, right-aligned headline and copy, and a full-width image below.
A split product hero with dual CTA, a compact logo row, and the Spot 01 illustration.
An editorial hero with a full-width image above, a top-aligned tagline, and right-aligned headline and copy below.
A split hero with a bold headline, avatar social proof, and two image cards with invertible overlay text and CTAs.
A centered real-estate hero with a search bar, a masked architecture image that fades into the page, and a split closing statement.
A centered hero with a highlighted headline, dual CTAs, social proof, and a fanned collage of three overlapping images.
A split-copy hero with a light product studio mock — issue feed, properties, and a floating agent panel that fades into the page.
A full-bleed image hero with an oversized name, an established label, and a floating pill CTA anchored to the corner.
Asymmetric editorial hero with serif brand title, supporting copy, and two overlapping media frames.
A centered product hero with dual CTAs, a full-width photo with a floating block-builder demo panel, and a logo strip.
A directory-style hero with an oversized title, split intro with dual CTAs, and a row of wordmark cards with minimal imagery.
Image on the left beside a category, title, and link.
Refresh button whose icon rotates a full 360° on each click.
CTA arrow nudges right on hover.
Ghost ellipsis trigger opens a compact actions menu.
Generic user icon when there is no image or name.
Fixed leading icon in the trigger alongside the selected value; dropdown options are text only.
Custom larger toggle with sun / moon icons that swap inside the thumb.
Round icon-only badges across variants.
Square icon-only buttons in every icon size.
Compact icon-only triggers for view switching.
Icon badge pinned to the top-right corner.
Compact toolbar of icon-only buttons with merged borders, used for text formatting actions.