@papernote/uiPaper Notebook Aesthetic

Quick Start ​

npm install @papernote/ui

yarn add @papernote/ui

pnpm add @papernote/ui

Peer Dependencies ​

npm install react react-dom react-router-dom lucide-react tailwindcss

Basic Usage ​

import '@papernote/ui/styles';
import { Button, Card, CardHeader, CardTitle, CardContent } from '@papernote/ui';

function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome to @papernote/ui</CardTitle>
      </CardHeader>
      <CardContent>
        <p>A beautiful component library with paper notebook aesthetic</p>
        <Button variant="primary">Get Started</Button>
      </CardContent>
    </Card>
  );
}

Component Categories ​

Form Components (15+) ​

Button, Input, Select, MultiSelect, DatePicker, TimePicker, Textarea, Checkbox, RadioGroup, Switch, Rating, PasswordInput, NumberInput, Slider, ColorPicker

Layout Components (12+) ​

Stack, Grid, Box, Text, Card, Modal, Drawer, Page, PageLayout, Layout, AppLayout, Dashboard, TwoColumnContent

Data Display (10+) ​

DataTable, Table, Badge, StatusBadge, Avatar, Timeline, KanbanBoard, Calendar, CurrencyDisplay, DateDisplay

Navigation (10+) ​

Breadcrumbs, Pagination, Sidebar, Tabs, StepIndicator, Menu, Dropdown, CommandPalette, TreeView, PageNavigation

Feedback Components (8+) ​

Toast, Alert, Modal, Drawer, Tooltip, EmptyState, Loading, Skeleton, LoadingOverlay, ConfirmDialog, Progress

Advanced Components (15+) ​

Accordion, Transfer, Carousel, Stepper, Popover, ButtonGroup, Autocomplete, Combobox, DateRangePicker, FormWizard, RichTextEditor, MarkdownEditor, InfiniteScroll, DropZone, ErrorBoundary

Why @papernote/ui? ​

Production Ready ​

Published on npm, documented in Storybook with 500+ examples, used in production applications, comprehensive testing.

Developer Experience ​

TypeScript first, tree-shakeable exports, virtual scrolling for large datasets, optimized bundle size, fast build times.

Design System ​

Muted warm color palette, subtle paper grain textures, professional appearance, minimalist design philosophy.

Accessibility ​

WCAG AA compliant, ARIA attributes throughout, full keyboard navigation, screen reader support.

Resources ​

• 📖 Live Storybook - Interactive component playground
• 📦 npm Package - Published package
• 💬 GitHub - Source code and issues
• 🎨 Design System - Colors, typography, and patterns

License ​

MIT License - Copyright (c) 2025 kwhittenberger