@nero06/paper-ui-components

Hand-drawn React component library. Build UIs that look like they were sketched in a notebook — powered by rough.js.

What It Is

A React component library with a hand-drawn aesthetic powered by rough.js. Choose your workflow: copy components directly into your project using our CLI (shadcn/ui style), or install as a standard npm package.

Quick Start

Option 1: Add components (recommended)

npx @nero06/paper-ui-components add card button
# or interactive picker
npx @nero06/paper-ui-components add

Run npx @nero06/paper-ui-components init on first use to configure paths.

Option 2: Install as a package

npm install @nero06/paper-ui-components

import "@nero06/paper-ui-components/dist/tokens.css"

Example

import { ThemeProvider, Card, PaperButton } from "@nero06/paper-ui-components"
import "@nero06/paper-ui-components/dist/tokens.css"

export default function App() {
  return (
    <ThemeProvider defaultTheme="light">
      <Card>
        <Card.Header>
          <Card.Title>Hello Paper-UI</Card.Title>
          <Card.Description>Notebook-styled React components</Card.Description>
        </Card.Header>
        <Card.Content>
          <p>Build interfaces with a hand-crafted feel.</p>
        </Card.Content>
        <Card.Footer>
          <Card.Actions>
            <PaperButton tone="dark">Get started</PaperButton>
            <PaperButton>Learn more</PaperButton>
          </Card.Actions>
        </Card.Footer>
      </Card>
    </ThemeProvider>
  )
}

Documentation

• Full API reference & docs
• Storybook — interactive examples

License

MIT