HomeWorkAboutContactSign inGet started
UI Primitives

Component Library

Every component ships fully typed and prop-driven. Customize via @theme tokens in globals.css. No component file edits needed.

10Primitives
5Sections
4Hooks
35+Total
Explore componentsBack to home
I

Button

Variants
Sizes
As Link

Pass an href prop and Button renders as next/link automatically.

Usage
<Button variant="primary" size="md" href="/signup">
  Get started
</Button>
II

Badge

Variants
InkAccentCTAGhostParchment
In Context
Design SystemNext.js 15NewTypeScriptv1.0EditorialApp RouterLaunchTailwind v4
Usage
<Badge variant="accent">Design System</Badge>
<Badge variant="cta">New</Badge>
<Badge variant="ghost">v1.0</Badge>
III

Text

bodyEditorial design and modern engineering, together.Paragraph copy, descriptions, readable blocks.
captionPublished March 12, 2026 · 4 min readDates, meta info, footnotes, helper hints.
labelDesign SystemSection labels, categories, uppercase ids.
codesrc/app/globals.cssFile paths, token names, inline code.
IV

Card

DesignI

Editorial Design System

Cormorant Garamond paired with Inter. Parchment backgrounds, forest green accents.

globals.css · 1 file to customize

StackII

Next.js 15 App Router

Server components by default. TypeScript strict mode. Tailwind v4 tokens. Zero config.

Zod validation · React 19

AuthIII

Auth Pages Included

Login and signup with Zod validation. Professional form layout. Wire up your backend.

/login · /signup

Usage
<Card>
  <div className="folio-card-header">...</div>
  <div className="folio-card-body">...</div>
  <div className="folio-card-footer">...</div>
</Card>
V

Pullquote

Typography is the design. Everything else is structure.

FOLIO // NEXT, Design Principles

Open the zip, run npm run dev, and start building. That is the entire process.

Usage
<Pullquote
  quote="Typography is the design."
  attribution="Studio Name"
/>
VI

Date & Calendar

Editorial date primitives built for print-inspired interfaces. DateBlock for single-date display, Calendar for month navigation.

DateBlock
March2026
12
Thursday
<DateBlock date={new Date()} />
Calendar
March 2026
Mon
Tue
Wed
Thu
Fri
Sat
Sun
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
<Calendar initialDate={new Date()} />

Both components accept a Date prop. Calendar is a client component with full month navigation and keyboard support. DateBlock is a server component with zero JS overhead.

VII

Color Tokens

folio-bg
#F4F1EC
folio-bg-alt
#EDE9E2
folio-bg-deep
#E8E3DA
folio-accent
#1A3027
folio-cta
#B5562E
folio-cta-dark
#9A4424
folio-ink
#1A1814
folio-ink-mid
#2E2A24
How tokens work

All tokens live in src/app/globals.css under @theme. Change any value and every component updates automatically.

VIII

System Pages

404 Page
Not Found

Shown when a route does not exist.

→ Preview
Error Page
Something Went Wrong

Shown on runtime exceptions.

→ Preview
Auth: Login
Sign In

Zod-validated login form, ready to wire up.

→ Preview
Auth: Signup
Create Account

Full signup flow with confirm password and validation.

→ Preview

Auth pages use Zod validation and are ready to wire to any backend. System pages trigger on unknown routes and runtime exceptions respectively.