How do I use Notepad in my project?

Copy the NotepadCard source code from https://opensourceui.in/components/notepad, add lib/cn.ts if needed, install clsx tailwind-merge and lucide-react, then import and render the component in your React or Next.js app.

Can I use Notepad in a commercial project?

Yes. Opensource UI is MIT licensed. You can use NotepadCard in personal and commercial projects without UI attribution.

Back to Text Components / Text

Notepad

Sticky notepad with an italic quote, author line, and checkbox task list. Bookmark ribbon on top — good for editorial or productivity layouts.

Preview

Note to self

"Design is not just what it looks like and feels like. Design is how it works."

— S. Jobs

Ship the MVP

Write tests

Review PR #42

Setup

How to use

Free for personal and commercial use. No UI attribution required. Include the MIT copyright notice when copying component source into your project. Read the MIT license.

1
Run in your terminal:
$npm install clsx tailwind-merge lucide-react
2
Copy lib/cn.ts below. Skip if you already have cn().
3
Copy the code below and create components/text/notepad-card.tsx in your project.
4
Import and render:
Example
import { NotepadCard } from "@/components/text/notepad-card";
<NotepadCard title="Note to self" quote="Your quote here" author="Name" checklist={["One", "Two"]} />

lib/cn.ts

1
2
3
import { cn } from '@/lib/cn';
 
// Full source is available in the repository checkout.

components/text/notepad-card.tsx

1
2
// Full source: components/components/text/notepad-card.tsx
// The Cloudflare worker does not expose the source tree at request time.

Back to Text Components / Text

Notepad

Sticky notepad with an italic quote, author line, and checkbox task list. Bookmark ribbon on top — good for editorial or productivity layouts.

Preview

Note to self

"Design is not just what it looks like and feels like. Design is how it works."

— S. Jobs

Ship the MVP

Write tests

Review PR #42

Setup

How to use

Free for personal and commercial use. No UI attribution required. Include the MIT copyright notice when copying component source into your project. Read the MIT license.

1
Run in your terminal:
$npm install clsx tailwind-merge lucide-react
2
Copy lib/cn.ts below. Skip if you already have cn().
3
Copy the code below and create components/text/notepad-card.tsx in your project.
4
Import and render:
Example
import { NotepadCard } from "@/components/text/notepad-card";
<NotepadCard title="Note to self" quote="Your quote here" author="Name" checklist={["One", "Two"]} />

lib/cn.ts

1
2
3
import { cn } from '@/lib/cn';
 
// Full source is available in the repository checkout.

components/text/notepad-card.tsx

1
2
// Full source: components/components/text/notepad-card.tsx
// The Cloudflare worker does not expose the source tree at request time.