Documentation

Blocks

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

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 @cronus-ui/ui package directly, so you get a working section in one command instead of wiring primitives together by hand.

There are 20 families covering 74 blocks, from auth and marketing to billing, commerce, admin, and store. Preview each one — with its variants and source — in the live catalog.

Families

Blocks are grouped into families by the surface they serve. Counts come from the live index, not a hand-written list.

Auth

Login, Sign Up, Forgot Password, Two-Factor Code, Magic Link.

Account

Account security, Sessions, API keys, Notification preferences.

Marketing

Hero, Pricing, Feature Matrix, Feature Grid, Call to Action, and 6 more.

Content

Blog, Blog post, Logo cloud, About.

Application

Stats Cards, Settings Panel, Team Members.

Onboarding

Welcome, Setup Wizard, Setup Checklist.

Social

Post Card, Comment Thread, Profile Card.

Dashboard

Dashboard.

Admin

User management, Analytics, Kanban board, Audit log.

Billing

Billing, Manage Subscription, Payment Method, Usage Dashboard, Cancel Flow.

Commerce

Checkout, Payouts, Product Grid, Invoice.

Store

Product detail, Cart, Order tracking, Order history, Reviews.

Page sections

Page Header, Filter Bar, Empty State, Status Page.

AI & Chat

Chat Thread, Prompt Box, AI Response.

Notifications

Notification Panel, Activity Feed, Toast Stack.

Email

Welcome Email, Receipt Email, Verify Email.

States

Not Found, Error State, Success State, Maintenance.

Feedback

NPS Survey, Feedback Form, Contact Form.

Integrations

Integrations Grid.

App Shell

App Shell.

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 cronus-ui add login

This writes components/blocks/login.tsxand installs the block's dependencies (@cronus-ui/ui plus any extras like lucide-react). Unlike components, a block imports @cronus-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 cronus-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.