design-infraGitHub

Starter templates

Whole pages composed from @design-infra blocks. Install a design system theme, then a template — the page file lands at its route and every block it uses is pulled in as a dependency. The theme decides how it looks; the template decides what's on the page.

$pnpm dlx shadcn@latest add @design-infra/theme-editorial @design-infra/template-landing
Template · SaaS landing page

@design-infra/template-landing → app/page.tsx

Full marketing page at app/page.tsx: navbar, split hero, marquee logo cloud, feature bento, stats, testimonials, pricing, FAQ, CTA banner and footer — all @oc blocks, all theme tokens. Install a theme first, then replace the copy.

$pnpm dlx shadcn@latest add @design-infra/template-landing
Editorial
Template · SaaS dashboard

@design-infra/template-saas-dashboard → app/dashboard/page.tsx

Dashboard at app/dashboard/page.tsx: @oc/app-shell sidebar + breadcrumbs, KPI stat cards with sparklines, revenue area chart (shadcn chart), recent-activity card and a searchable, filterable customers table.

$pnpm dlx shadcn@latest add @design-infra/template-saas-dashboard
Linear Dark
Template · AI chat

@design-infra/template-ai-chat → app/chat/page.tsx

Assistant UI at app/chat/page.tsx: conversation sidebar (@oc/app-shell), @oc/chat-thread with tool-call chips, @oc/agent-status while the model works, and @oc/prompt-composer pinned to the bottom. Fake responder included — swap in your streaming call.

$pnpm dlx shadcn@latest add @design-infra/template-ai-chat
Soft Glass