Notebook Shadcn Theme
Academic notebook theme with scholarly precision for shadcn/ui. Paper-inspired design with intellectual handwritten vibes. TypeScript ready.
Powered by
Working with shadcn themes?
Join our Discord community for help from other shadcn developers working with themes and design systems.
Notebook Shadcn Theme
Always loved the feeling of opening a fresh notebook and starting to think through complex problems on paper. This theme captures that same intellectual energy—clean paper whites with subtle handwritten-style typography, the kind of aesthetic that makes you want to diagram system architecture or sketch out algorithm flows.
Perfect for documentation sites, academic interfaces, note-taking apps, or any React project where thoughtful precision matters more than flashy design. The Architects Daughter font gives you that handwritten notebook feel that makes complex information feel approachable.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/notebook.jsonnpx shadcn@latest add https://www.shadcn.io/registry/notebook.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/notebook.jsonbunx shadcn@latest add https://www.shadcn.io/registry/notebook.jsonOriginal theme by tweakcn.com
CSS Variables
Copy and paste the following CSS variables into your global CSS file:
:root {
--background: oklch(0.9821 0 0);
--foreground: oklch(0.3485 0 0);
--card: oklch(1.0000 0 0);
--card-foreground: oklch(0.3485 0 0);
--popover: oklch(1.0000 0 0);
--popover-foreground: oklch(0.3485 0 0);
--primary: oklch(0.4891 0 0);
--primary-foreground: oklch(0.9551 0 0);
--secondary: oklch(0.9006 0 0);
--secondary-foreground: oklch(0.3485 0 0);
--muted: oklch(0.9158 0 0);
--muted-foreground: oklch(0.4313 0 0);
--accent: oklch(0.9354 0.0456 94.8549);
--accent-foreground: oklch(0.4015 0.0436 37.9587);
--destructive: oklch(0.6627 0.0978 20.0041);
--border: oklch(0.5538 0.0025 17.2320);
--input: oklch(1.0000 0 0);
--ring: oklch(0.7058 0 0);
--chart-1: oklch(0.3211 0 0);
--chart-2: oklch(0.4495 0 0);
--chart-3: oklch(0.5693 0 0);
--chart-4: oklch(0.6830 0 0);
--chart-5: oklch(0.7921 0 0);
--sidebar: oklch(0.9551 0 0);
--sidebar-foreground: oklch(0.3485 0 0);
--sidebar-primary: oklch(0.4891 0 0);
--sidebar-primary-foreground: oklch(0.9551 0 0);
--sidebar-accent: oklch(0.9354 0.0456 94.8549);
--sidebar-accent-foreground: oklch(0.4015 0.0436 37.9587);
--sidebar-border: oklch(0.8078 0 0);
--sidebar-ring: oklch(0.7058 0 0);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Architects Daughter, sans-serif;
--font-serif: "Times New Roman", Times, serif;
--font-mono: "Courier New", Courier, monospace;
--radius: 0.625rem;
--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
--tracking-normal: 0em;
--spacing: 0.25rem;
}
.dark {
--background: oklch(0.2891 0 0);
--foreground: oklch(0.8945 0 0);
--card: oklch(0.3211 0 0);
--card-foreground: oklch(0.8945 0 0);
--popover: oklch(0.3211 0 0);
--popover-foreground: oklch(0.8945 0 0);
--primary: oklch(0.7572 0 0);
--primary-foreground: oklch(0.2891 0 0);
--secondary: oklch(0.4676 0 0);
--secondary-foreground: oklch(0.8078 0 0);
--muted: oklch(0.3904 0 0);
--muted-foreground: oklch(0.7058 0 0);
--accent: oklch(0.9067 0 0);
--accent-foreground: oklch(0.3211 0 0);
--destructive: oklch(0.7915 0.0491 18.2410);
--border: oklch(0.4276 0 0);
--input: oklch(0.3211 0 0);
--ring: oklch(0.8078 0 0);
--chart-1: oklch(0.9521 0 0);
--chart-2: oklch(0.8576 0 0);
--chart-3: oklch(0.7572 0 0);
--chart-4: oklch(0.6534 0 0);
--chart-5: oklch(0.5452 0 0);
--sidebar: oklch(0.2478 0 0);
--sidebar-foreground: oklch(0.8945 0 0);
--sidebar-primary: oklch(0.7572 0 0);
--sidebar-primary-foreground: oklch(0.2478 0 0);
--sidebar-accent: oklch(0.9067 0 0);
--sidebar-accent-foreground: oklch(0.3211 0 0);
--sidebar-border: oklch(0.4276 0 0);
--sidebar-ring: oklch(0.8078 0 0);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Architects Daughter, sans-serif;
--font-serif: Georgia, serif;
--font-mono: "Fira Code", "Courier New", monospace;
--radius: 0.625rem;
--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--color-destructive-foreground: var(--destructive-foreground);
--font-sans: var(--font-sans);
--font-mono: var(--font-mono);
--font-serif: var(--font-serif);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--shadow-2xs: var(--shadow-2xs);
--shadow-xs: var(--shadow-xs);
--shadow-sm: var(--shadow-sm);
--shadow: var(--shadow);
--shadow-md: var(--shadow-md);
--shadow-lg: var(--shadow-lg);
--shadow-xl: var(--shadow-xl);
--shadow-2xl: var(--shadow-2xl);
}Why this theme actually works
Back in university, noticed how my best problem-solving sessions happened with a good notebook and a decent pen. There's something about that blank page aesthetic that clears mental clutter and helps you think step by step. This theme brings that same clarity to digital interfaces.
Most academic-inspired themes either go too stark and feel institutional, or too playful and lose credibility. This theme hits the sweet spot—scholarly without being intimidating, clean without being sterile. The handwritten typography adds personality while maintaining professional legitimacy.
Dark mode transforms the notebook into something that feels like late-night research sessions—still intellectual and focused, but easier on the eyes during those marathon documentation sprints.
What's actually in this theme
Dead simple setup—copy the CSS variables into your globals.css and you're done. The Architects Daughter font is the secret sauce here—it gives you that handwritten notebook feeling without looking childish or unprofessional.
The clean grays create excellent hierarchy for complex information architecture. Perfect for documentation sites where you need to present technical concepts in digestible chunks. The moderate border radius feels deliberate and thoughtful rather than flashy.
All contrast ratios pass WCAG AA standards because good scholarship is always inclusive. Since it uses standard shadcn color tokens, your TypeScript autocomplete for bg-primary, text-foreground, etc. works perfectly.
How to use this in projects
The scholarly grays should mark important concepts and create clear information hierarchy—think section headers, key terms, important callouts. Use the notebook aesthetic to make complex technical content feel approachable and organized.
This works especially well for documentation sites, academic platforms, research tools, or any interface where thoughtful information presentation matters more than flashy visuals. Think university library, not startup pitch deck.
In practice, embrace the intellectual aesthetic this palette creates. The notebook-inspired design helps users feel like they're learning and discovering rather than just consuming content. Perfect for interfaces that need to handle complex information gracefully.
You might also like
Mono Theme
Pure monochromatic theme with scholarly focus
Graphite Theme
Sophisticated graphite with academic precision
Corporate Theme
Professional corporate theme with intellectual authority
Dark Matter Theme
Deep space inspired theme for research interfaces
Vercel Theme
Clean technical documentation theme
Claymorphism Theme
Organic clay theme with handcrafted appeal
FAQ
Mono Shadcn Theme
Pure monochromatic theme with stark black and white design for shadcn/ui. Terminal-inspired aesthetic with zero-distraction focus. TypeScript ready.
Perpetuity Shadcn Theme
Timeless terminal theme with infinite depth for shadcn/ui. Eternal blue-gray design with enduring monospace precision. TypeScript ready.