Nook Design System

A comprehensive, themeable design system for React applications built with Radix UI primitives and Framer Motion animations.

Features

• 🎨 Themeable components with SCSS modules and CSS variables
• ♿️ Accessible components built on Radix UI primitives
• 🎭 Smooth animations powered by Framer Motion
• 📦 Tree-shakeable ESM package
• 🔒 Type-safe with full TypeScript support
• 📱 Responsive and mobile-first design

Installation

npm install @nanonansen2/nook-design-system

Usage

import { Button, Input } from '@nanonansen2/nook-design-system'

function App() {
  return (
    <div>
      <Button>Click me</Button>
      <Input placeholder="Enter text..." />
    </div>
  )
}

Available Components

• Button
• Input
• More components coming soon...

Development

Setup

1. Clone the repository
2. Install dependencies:

npm install

Development Commands

• npm run dev - Start development server
• npm run build - Build the library
• npm run storybook - Start Storybook development server
• npm run lint - Run ESLint
• npm run build-storybook - Build Storybook for production

Project Structure

lib/
  ├── components/     # React components
  ├── tokens/         # Design tokens
  ├── utils/         # Utility functions
  └── main.ts        # Main entry point

Contributing

1. Create a new branch from main
2. Make your changes
3. Submit a pull request

Please follow our commit message convention:

• fix: for bug fixes
• feat: for new features
• docs: for documentation changes
• style: for formatting changes
• refactor: for code refactoring
• test: for adding tests
• chore: for maintenance tasks

License

MIT © [Nook Design System]