Documentation

Blocks

Larger, composed UI sections — auth cards, dashboards, pricing tables, and more — built from Cooud UI primitives and ready to drop into a page.

Browse blocks

What blocks are

A component is a single primitive — a Button, an Input, a Card. A block is a larger, opinionated section composed from those primitives: a centered login card, a KPI dashboard, a three-tier pricing grid. Blocks import the @cooud-ui/ui package directly, so you get a working section in one command instead of wiring primitives together by hand.

There are 13 families covering roughly 48 blocks today, from auth and marketing to billing, commerce, and AI. Preview each one — with its variants and source — in the live catalog.

Browse blocks

Families

Blocks are grouped into families by the surface they serve. Each family ships a handful of blocks, many with multiple variants.

Auth

5 blocks

Marketing

8 blocks

Hero, pricing, feature grid, CTA, testimonials, FAQ, footer, and navbar sections.

Application

3 blocks

Stat cards, a settings panel, and a team-members list for app shells.

Onboarding

3 blocks

A welcome panel, a setup wizard, and a setup checklist.

Dashboard

1 blocks

A full application shell with sidebar nav, KPI cards, a chart, and a table.

Billing

5 blocks

Subscription, plan selection, payment methods, usage, and a cancel flow.

Commerce

4 blocks

Checkout, creator payouts, a product grid, and an invoice receipt.

AI & Chat

3 blocks

A chat thread, a prompt box, and a formatted AI response card.

Notifications

3 blocks

A notification panel, an activity feed, and a toast stack.

Email

3 blocks

Branded welcome, receipt, and verify email templates.

States

4 blocks

Not-found, error, success, and maintenance full-page states.

Feedback

3 blocks

An NPS survey, a feedback form, and a contact form.

Page sections

3 blocks

A page header, a filter bar, and empty/error states.

Install a block

Use the same add command you use for components. Blocks are registry:block items, so the CLI writes the source straight into your app and installs the npm packages it needs.

bash

npx cooud-ui add login

This writes components/blocks/login.tsxand installs the block's dependencies (@cooud-ui/ui plus any extras like lucide-react). Unlike components, a block imports @cooud-ui/ui rather than vendoring each primitive — so adding a block never floods your tree with copied component files. The written file is yours to edit.

bash

# Add several blocks in one run
npx cooud-ui add login signup pricing dashboard

Compose and customize

A block is plain source you own. Import it where you need it, then change whatever you like — rewrite the copy, swap in your data, or restyle it. Because blocks consume the same semantic tokens as every component, they re-theme automatically with the rest of your app.

tsx

import { LoginBlock } from "@/components/blocks/login";

export default function SignInPage() {
  return (
    <main className="flex min-h-svh items-center justify-center bg-surface-base p-6">
      {/* Installed source — edit the copy, swap the data, restyle with tokens. */}
      <LoginBlock />
    </main>
  );
}

Restyling rarely means touching the block — change a token through your theme and the block follows. See Theming for how tokens and presets work.

Block or component?

Reach for a component when you need a single primitive to compose your own layout, and a block when you want a whole section — a login screen, a pricing page, a dashboard — in one step. Every block re-themes through the same semantic tokens, so it adopts your brand without edits.