Blocks

All 28 block components โ€” pre-built, composable sections for building pages.

Navigation

Headers, footers, and navigation patterns.

SimpleNav

Horizontal nav bar with logo and links.

Nav

Full navigation with dropdowns, auth state, theme toggle, and avatar menu.

PublicNav

Simplified nav used by generated apps. Includes about, pricing, contact, and auth links.

TopBar

Dashboard header with breadcrumbs and avatar menu for authenticated layouts.

Footer

Simple footer with logo, copyright, and optional links.

๐Ÿš€ยฉ 2026 My App

PublicFooter

Footer used by generated apps with nav links.

BackLink

Back navigation link with arrow icon.

CookieBanner

GDPR cookie consent banner with accept/decline buttons.

We use cookies to improve your experience. Privacy Policy

Hero Sections

Landing page hero patterns.

Hero

Centered hero with title, logo, tagline, description, and CTA buttons.

โœจMy App

Build Something Great

A short description of your amazing project.

FloatingHero

Hero with floating/gradient background effect.

Floating Hero

A hero with a subtle floating effect.

Content Sections

Page sections for features, stories, and CTAs.

Blurb

Page title with description intro.

Page Title

A brief description of what this page is about.

Story

Narrative section with image support.

Our Story

This is the first paragraph of our story. And this is the second paragraph with more details about how we got here.

Features

Grid of feature cards with icons.

Fast

Lightning fast performance

Secure

Built with security in mind

Global

Deploy anywhere in the world

StripedSections

Alternating background sections.

Section One

First section content.

Section Two

Second section content with alternating background.

CTA

Call-to-action section.

Ready to get started?

Join thousands of happy customers today.

Team

Team member grid.

Meet the Team

A

Alice

Developer

Full-stack engineer

B

Bob

Designer

UI/UX specialist

Services

Service cards with icons and descriptions.

Web Development

Custom websites built to your needs.

CalloutGrid

Grid of callout items with icons.

Feature One

Description of feature one

Feature Two

Description of feature two

CalloutNumbered

Numbered steps.

How It Works

1

Plan

Define the scope

2

Build

Develop the solution

3

Launch

Deploy to production

EmojiList

List with emoji icons.

๐Ÿ“ง

Email

hello@example.com

๐Ÿ“

Location

San Francisco, CA

CalloutFAQ

FAQ section with accordion.

FAQ

PricingCards

Pricing comparison cards for free/pro tiers.

Free
$0
For getting started
  • 1 workspace
  • Unlimited projects
  • Community support
Pro
$9/mo/mo
For power users
  • Unlimited workspaces
  • Priority support
  • Advanced analytics
  • Custom domains

Auth & Account

Login, signup, profile, and account management.

LoginForm

Card-based login form with email/password.

Welcome back

Don't have an account? Sign up

SignupForm

Card-based signup form with email, name, password, confirm.

Create an account

Already have an account? Sign in

ProfilePage

User profile with avatar, info, and settings link.

Blocks
DU

Your Profile

demo@example.com

User ID: demo

Member since 4/4/2026

Settings

AccountPage

Account settings with profile edit, security, and info cards.

Blocks

Account

Profile
Update your display name and email
Security
Change your password

Password changes coming soon.

Account info

User ID: demo

AvatarMenu

Dropdown triggered by user avatar โ€” account link and sign out.

Click the avatar to open the dropdown

CartDrawer

Slide-out shopping cart with item list, quantity controls, and checkout button.

Add an item, then click the cart icon โ†’