Component library

Browse every block and copy its code directly. To insert one onto a live page with one click instead, open it in the editor's Components tab.

Layout

Divider

<hr className="border-border" />

Spacer

<div className="h-12" />

Section container

<section className="py-12">
  <div className="mx-auto max-w-7xl px-4">Section content</div>
</section>

List

<ul className="list-disc space-y-1 pl-5 text-sm text-muted-foreground">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Typography

Heading

<h2 className="text-2xl font-semibold text-foreground">New heading</h2>

Paragraph

<p className="text-sm text-muted-foreground">New paragraph text.</p>

Badge

<span className="rounded-full bg-accent px-2 py-0.5 text-xs text-accent-foreground">Badge</span>

Basic

Button

<button type="button" className="rounded bg-primary px-4 py-2 text-sm font-medium text-primary-foreground">Button</button>

Link

<Link href="/" className="text-sm text-primary underline">Link text</Link>

Text input

<input type="text" placeholder="Enter text" className="rounded border border-border bg-background px-3 py-2 text-sm text-foreground" />

Icon (star)

<Star className="h-5 w-5 text-primary" />

Media

Image

<Image src="/placeholder.svg" alt="Description" width={640} height={360} className="w-full rounded" />

Navigation

Navbar

<nav className="flex items-center justify-between border-b border-border px-4 py-3">
  <span className="text-sm font-semibold text-foreground">Brand</span>
  <div className="flex items-center gap-4 text-sm text-muted-foreground">
    <Link href="/" className="hover:text-foreground">Home</Link>
    <Link href="/" className="hover:text-foreground">About</Link>
    <Link href="/" className="hover:text-foreground">Contact</Link>
  </div>
</nav>

Footer

<footer className="border-t border-border px-4 py-8 text-sm text-muted-foreground">
  <div className="mx-auto flex max-w-7xl flex-col gap-4 sm:flex-row sm:justify-between">
    <span>© Your Company</span>
    <div className="flex gap-4">
      <Link href="/" className="hover:text-foreground">Privacy</Link>
      <Link href="/" className="hover:text-foreground">Terms</Link>
    </div>
  </div>
</footer>

Breadcrumb

<nav className="flex items-center gap-1 text-xs text-muted-foreground">
  <Link href="/" className="hover:text-foreground">Home</Link>
  <span>/</span>
  <Link href="/" className="hover:text-foreground">Section</Link>
  <span>/</span>
  <span className="text-foreground">Current page</span>
</nav>

Tab list

<div className="flex gap-4 border-b border-border text-sm">
  <span className="border-b-2 border-primary px-1 pb-2 text-foreground">Tab one</span>
  <span className="px-1 pb-2 text-muted-foreground">Tab two</span>
  <span className="px-1 pb-2 text-muted-foreground">Tab three</span>
</div>

Forms

Textarea

<textarea placeholder="Enter a longer message" rows={4} className="w-full rounded border border-border bg-background px-3 py-2 text-sm text-foreground" />

Select

<select className="rounded border border-border bg-background px-3 py-2 text-sm text-foreground">
  <option>Option one</option>
  <option>Option two</option>
</select>

Checkbox

<label className="flex items-center gap-2 text-sm text-foreground">
  <input type="checkbox" className="h-4 w-4 rounded border-border" />
  Checkbox label
</label>

Radio

<label className="flex items-center gap-2 text-sm text-foreground">
  <input type="radio" name="option" className="h-4 w-4 border-border" />
  Radio label
</label>

Form label

<label className="text-sm font-medium text-foreground">Field label</label>

Newsletter form

<form className="flex gap-2">
  <input type="email" placeholder="you@example.com" className="flex-1 rounded border border-border bg-background px-3 py-2 text-sm text-foreground" />
  <button type="submit" className="rounded bg-primary px-4 py-2 text-sm font-medium text-primary-foreground">Subscribe</button>
</form>

Cards

Card

<div className="rounded-lg border border-border bg-card p-4">
  <h3 className="text-sm font-semibold text-foreground">Card title</h3>
  <p className="mt-1 text-sm text-muted-foreground">Card description text goes here.</p>
</div>

Image card

<div className="overflow-hidden rounded-lg border border-border bg-card">
  <div className="aspect-video w-full bg-secondary" />
  <div className="p-4">
    <h3 className="text-sm font-semibold text-foreground">Card title</h3>
    <p className="mt-1 text-sm text-muted-foreground">Card description text goes here.</p>
  </div>
</div>

Pricing card

<div className="flex flex-col gap-4 rounded-lg border border-border bg-card p-6">
  <span className="text-sm font-medium text-muted-foreground">Plan name</span>
  <span className="text-3xl font-semibold text-foreground">$19<span className="text-sm font-normal text-muted-foreground">/mo</span></span>
  <ul className="flex flex-col gap-2 text-sm text-muted-foreground">
    <li className="flex items-center gap-2"><Check className="h-4 w-4 text-primary" />Feature one</li>
    <li className="flex items-center gap-2"><Check className="h-4 w-4 text-primary" />Feature two</li>
    <li className="flex items-center gap-2"><Check className="h-4 w-4 text-primary" />Feature three</li>
  </ul>
  <button type="button" className="rounded bg-primary px-4 py-2 text-sm font-medium text-primary-foreground">Choose plan</button>
</div>

Testimonial card

<div className="rounded-lg border border-border bg-card p-6">
  <p className="text-sm italic text-muted-foreground">&quot;This product changed how we work.&quot;</p>
  <div className="mt-4 flex items-center gap-2">
    <div className="h-8 w-8 rounded-full bg-secondary" />
    <span className="text-sm font-medium text-foreground">Jane Doe</span>
  </div>
</div>

Marketing

Hero section

<section className="flex flex-col items-center gap-4 py-20 text-center">
  <h1 className="text-4xl font-semibold text-foreground">Your headline goes here</h1>
  <p className="max-w-xl text-muted-foreground">A short supporting sentence that explains the value of what you&apos;re offering.</p>
  <button type="button" className="rounded bg-primary px-6 py-3 text-sm font-medium text-primary-foreground">Get started</button>
</section>

CTA banner

<section className="flex flex-col items-center gap-3 rounded-lg bg-primary px-6 py-10 text-center text-primary-foreground">
  <h2 className="text-2xl font-semibold">Ready to get started?</h2>
  <button type="button" className="flex items-center gap-1 rounded bg-primary-foreground px-4 py-2 text-sm font-medium text-primary">
    Get started <ArrowRight className="h-4 w-4" />
  </button>
</section>

Feature item

<div className="flex flex-col gap-2">
  <Star className="h-6 w-6 text-primary" />
  <h3 className="text-sm font-semibold text-foreground">Feature name</h3>
  <p className="text-sm text-muted-foreground">A short description of this feature.</p>
</div>

Stat

<div className="flex flex-col items-center gap-1 text-center">
  <span className="text-3xl font-semibold text-foreground">10k+</span>
  <span className="text-sm text-muted-foreground">Happy customers</span>
</div>

FAQ item

<details className="border-b border-border py-3">
  <summary className="cursor-pointer text-sm font-medium text-foreground">Question goes here?</summary>
  <p className="mt-2 text-sm text-muted-foreground">Answer text goes here.</p>
</details>

Material

Filled button (Material)

<>
  <Script id="material-web-bundle" src="/vendor/material-web/material-web-bundle.min.js" strategy="afterInteractive" />
  <md-filled-button>Button</md-filled-button>
</>

Outlined button (Material)

<>
  <Script id="material-web-bundle" src="/vendor/material-web/material-web-bundle.min.js" strategy="afterInteractive" />
  <md-outlined-button>Button</md-outlined-button>
</>

Text button (Material)

<>
  <Script id="material-web-bundle" src="/vendor/material-web/material-web-bundle.min.js" strategy="afterInteractive" />
  <md-text-button>Button</md-text-button>
</>

Checkbox (Material)

<>
  <Script id="material-web-bundle" src="/vendor/material-web/material-web-bundle.min.js" strategy="afterInteractive" />
  <label className="flex items-center gap-2 text-sm text-foreground">
    <md-checkbox></md-checkbox>
    Checkbox label
  </label>
</>

Radio group (Material)

<>
  <Script id="material-web-bundle" src="/vendor/material-web/material-web-bundle.min.js" strategy="afterInteractive" />
  <div className="flex items-center gap-4 text-sm text-foreground">
    <label className="flex items-center gap-2">
      <md-radio name="material-radio-group" value="one" checked></md-radio>
      Option one
    </label>
    <label className="flex items-center gap-2">
      <md-radio name="material-radio-group" value="two"></md-radio>
      Option two
    </label>
  </div>
</>

Switch (Material)

<>
  <Script id="material-web-bundle" src="/vendor/material-web/material-web-bundle.min.js" strategy="afterInteractive" />
  <label className="flex items-center gap-2 text-sm text-foreground">
    Enable feature
    <md-switch></md-switch>
  </label>
</>

Outlined text field (Material)

<>
  <Script id="material-web-bundle" src="/vendor/material-web/material-web-bundle.min.js" strategy="afterInteractive" />
  <md-outlined-text-field label="Label"></md-outlined-text-field>
</>

Filled text field (Material)

<>
  <Script id="material-web-bundle" src="/vendor/material-web/material-web-bundle.min.js" strategy="afterInteractive" />
  <md-filled-text-field label="Label"></md-filled-text-field>
</>

Chip set (Material)

<>
  <Script id="material-web-bundle" src="/vendor/material-web/material-web-bundle.min.js" strategy="afterInteractive" />
  <md-chip-set>
    <md-assist-chip label="Assist"></md-assist-chip>
    <md-assist-chip label="Another"></md-assist-chip>
  </md-chip-set>
</>

Linear progress (Material)

<>
  <Script id="material-web-bundle" src="/vendor/material-web/material-web-bundle.min.js" strategy="afterInteractive" />
  <md-linear-progress value="0.5"></md-linear-progress>
</>

Circular progress (Material)

<>
  <Script id="material-web-bundle" src="/vendor/material-web/material-web-bundle.min.js" strategy="afterInteractive" />
  <md-circular-progress value="0.5"></md-circular-progress>
</>

Dialog (Material)

<>
  <Script id="material-web-bundle" src="/vendor/material-web/material-web-bundle.min.js" strategy="afterInteractive" />
  <md-dialog>
    <div slot="headline">Dialog title</div>
    <form slot="content" id="material-dialog-form" method="dialog">
      Dialog content goes here.
    </form>
    <div slot="actions">
      <md-text-button form="material-dialog-form">Ok</md-text-button>
    </div>
  </md-dialog>
</>