Production-ready UI blocks for landing pages, dashboards, and web apps.
A full-height photographic install hero: the photo blurs in and drifts slower than the page under a scrim and film grain, a serif headline settles in word by word, then a frosted command pill that copies the install command on click, two sliding-marker pills and a short column of figures.
Features displayed inside an interactive command palette UI with live search filtering, grouped results, keyboard shortcuts, and hover states. Inspired by macOS Spotlight and VS Code command palette.
Developer-focused navbar with Cmd+K command palette for keyboard-driven navigation and actions. Perfect for developer tools, documentation sites, and power-user applications.
Search-forward navbar — a wide rounded search field sits at the center with an animated submit seal, framed by the wordmark, quiet links and a pill CTA.
A centered feature with an eyebrow, light heading, and paragraph over a wide image tile that floats a live command search bar, followed by a row of quick-filter chips.
An e-commerce analytics dashboard: sidebar + search topbar, a four-up KPI row with period deltas, a net-profit area chart, a repeat-rate radial gauge, a busiest-weekday bar chart, and a best-selling products data table.
A community section on a soft surface with four bordered figure cards, each explaining what the number counts, over an image tile that floats a live cluster of member portraits.
Community group card with cover image, privacy status, member/post counts, topic tags, and join button. Perfect for community discovery and group suggestions.
A community section listing four linked places to join as full-width hairline rows, each with an icon tile, a description, a light membership figure, and an arrow that shifts on hover.
Group cards with cover images, member count, privacy indicators, category badges, and join buttons. Perfect for community discovery and group listings.
A community coming-soon section on a soft muted card with a monospace parenthetical eyebrow, a heading, a working email waitlist form, a secondary outline community pill button, and an avatar row with a member count.
Member profile with achievements, social links, and contributions. Perfect for community highlights and user stories.
A wall of short community posts in three masonry columns, each a muted card with an avatar, name, handle, a linked timestamp and the note itself, settling in with a small stagger. The header carries a serif headline that settles in word by word and a sliding-marker pill at its right end.
A community gallery laid out as a masonry of customer photographs at mixed heights, each captioned with what is happening and the practice it came from.
An upcoming sessions list with a date block, format, and remaining seats on each linked hairline row, beside a column that sticks and floats a live card for whoever is hosting next.
A feature with an eyebrow over a hairline rule, a two-column heading, and three bordered cards that each float a compact live micro-asset above a title and description.
Single-line compact call-to-action bar with inline text and button. Perfect for subtle, non-intrusive conversion prompts between content sections.
Centered minimal footer with horizontal navigation, trust badges, and payment method icons. Perfect for smaller online stores wanting a clean checkout-focused layout.
Compact principles grid with a header and a four-up row of top-border items, each with a lucide icon, title and short description.
Compact profile card with cover image, avatar, verified badge, bio, location, website, join date, and post/follower stats. Perfect for profile page headers.
Minimal text-based layout with small featured image and condensed metadata. Ideal for short tips, quick takes, or news briefs.
Two-column compact blog list with small square thumbnails. Space-efficient design showing many posts at once with minimal metadata.
Left-aligned headline followed by a compact two-column grid of capability rows. Each row leads with a Lucide icon.
A header with a badge, heading, and description, followed by many compact items in a two-column grid — each a lucide icon in a rounded bg-muted tile beside a title and one-line description.
Full company overview with panoramic image, story paragraph, key facts list, leadership quote, and stats row. A rich, multi-section layout for company landing pages.
Company story with image, border-accented feature highlights, and stats row. Great for craft, heritage, and product-focused brands.
A company story told as hairline rows keyed by a light year figure, set against a media column that sticks while they scroll and stacks an image tile floating a live growth metric over a captioned photograph.
Onboarding screen for collecting company information including name, team size selector chips, and industry dropdown. Perfect for B2B SaaS apps that need organizational context during setup.
Asymmetric layout with company story and image on the left, and a vertical list of company details on the right. Great for press and investor pages.
A monochrome plan comparison matrix with ruled feature rows, check/minus cells, and per-plan CTAs.
Split-layout image comparison with a sidebar featuring benefit highlights and icons alongside a draggable before/after slider. Perfect for demonstrating product improvements with detailed feature callouts.
Transparent compensation philosophy with salary, equity, bonus, and perks cards. Shows total rewards approach with highlighted details.
Full-featured chatbot window with message thread, AI and user avatars, timestamp display, typing indicator, and rich input area with send button. Suitable as the primary chat experience.
Full-height profile setup step with an avatar uploader, a display name field, and a bio textarea, plus a skip option. Perfect for the post-sign-up onboarding step where users personalize their account.
Shows certification badges in a grid with verified checkmarks and in-progress states. Perfect for trust pages displaying security and compliance credentials.
Displays regulatory requirements with checkmarks, progress bar, and completion percentage. Perfect for showcasing compliance status across multiple standards.
Browser-chrome card pairing a live button-variant preview on the left with a syntax-highlighted code editor on the right — dotted canvas background, size pill toggle. Every label is editable; no media props required.
A pinned scroll hero for a bindery built on the concertina-book component: under a serif headline, an intro, an Arrow Pill and an underline link sits a folded book whose pages carry one wide photo printed across the whole strip. Scrolling down turns into sideways travel, and each page unfolds in 3D from a tight zigzag pile on the right, catching light and shade on its folds, until the picture lies flat and unbroken. Every book setting passes through the book prop; the pinned stage clears the viewport's bottom toolbar and reduced motion shows the flat pages in a swipeable row.
Bundle pricing cards showing included items, savings percentages, and feature lists. Perfect for conference packages combining passes, workshops, and recordings.
Split-layout event hero displaying conference details with date, location, attendee count, and featured image. Perfect for developer conferences and tech summits.
Summarizes confidentiality obligations with what is considered confidential, permitted disclosures, duration, and remedies. Suitable for vendor onboarding and partnership agreements.
Full-height step-up authentication screen that re-asks for the password before a sensitive action, showing the signed-in account and a cancel option. Perfect for protecting billing, security, and destructive actions.
A dark, centered conference hero over the conic-gradient background component: a two-armed ring of violet, cyan, pink and amber light turns slowly behind the headline, bent into a gentle spiral, breathing and finished with a fine film grain, while its center leans toward the cursor. Hovering or focusing the primary Arrow Pill spins the ring up, widens it and brightens its core, and leaving lets it glide back. An oversized headline, an intro, the pill and an underline link rise in over a soft dark veil. Every glow setting passes through the glow prop.
A horizontal pipeline with an eyebrow over a hairline rule and a two-column heading, where three image tiles float live micro-assets as connected stages joined by directional arrows.
Integration management card showing connected apps with logos, sync status, and connect/disconnect actions. Perfect for settings pages managing third-party integrations.
A feature with an eyebrow over a hairline rule, a two-column heading, and two rich cards that each float a live micro-asset above an eyebrow, title, and checked bullets, closing with a works-with integrations strip.
Full-height web3 sign-in that lists wallet providers with icons, details, and a detected badge, plus a what-is-a-wallet helper link. Perfect for crypto and decentralized app authentication.
Displays cookie categories with toggle switches to manage consent preferences. Perfect for allowing users to customize their privacy settings granularly.