React Notebook Theme

The intimacy of a blank page, waiting for your thoughts. This theme recreates the physical experience of writing in a notebook: warm paper backgrounds at oklch(0.97 0.02 85) that feel like quality stationery, ink-dark text at oklch(0.20 0.02 250) that has the weight of real writing, and the subtle visual cues (ruled lines, margin markers) that signal "this is for your ideas." It's not about reading published content—it's about creating personal content. Use it for note-taking and second-brain apps, journaling and diary platforms, writing tools and distraction-free editors, task managers with a personal feel, brainstorming and mind-mapping tools, or any Next.js project where users write for themselves. Dark mode inverts to a dark notebook—late-night journaling energy.

React Notebook Theme preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/notebook.json

npx shadcn@latest add https://www.shadcn.io/r/notebook.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/notebook.json

bunx shadcn@latest add https://www.shadcn.io/r/notebook.json

Related Components

FAQ