Base Components
Notes
Note-taking application with rich text editing, folder organization, tags, and full-text search. Ideal for personal productivity tools and knowledge management platforms.
Example
Welcome to Notes
Start capturing your thoughts, ideas, and tasks. Use categories and colors to stay organized.
Project Kickoff
Review the project scope, assign roles, set milestones for Q3. Send calendar invites to all stakeholders before Friday.
App Ideas
1. Recipe tracker with ingredient lists 2. Habit tracker with streaks 3. Budget planner with categories 4. Travel journal
Grocery List
• Milk • Bread • Eggs • Butter • Coffee beans • Olive oil • Pasta
TypeScript Tips
Use 'satisfies' for type checking without widening. Discriminated unions make exhaustive checks easier. Template literal types for string manipulation.
Books to Read
— Atomic Habits · James Clear — Deep Work · Cal Newport — The Pragmatic Programmer — Clean Code · Robert Martin
Weekly Goals
✓ Finish the dashboard redesign ✓ Review pull requests ○ Write unit tests ○ Update documentation ○ Deploy to staging
Morning Routine
6:00 Wake up · 6:15 Meditate · 6:30 Exercise · 7:15 Shower · 7:30 Breakfast · 8:00 Start work
Drag notes to reorder
Introduction
Notes includes:- Sidebar: Categories, color filters, and quick navigation on large screens; sheet on mobile.
- Search: Filter notes by title, content, or category.
- Pinned notes: Pin important notes to the top when not filtering.
- Grid and list views: Toggle layout for browsing notes.
- Drag and drop: Reorder notes with
@dnd-kit(pinned and regular sections).
Usage
import { NotesPage } from "@/components/ui/notes-page";
<NotesPage />;