ERP Theme - shadcn/ui Component Library

A beautiful and reusable component library built with shadcn/ui, TypeScript, TailwindCSS, and Storybook.

Features

• 🎨 Beautiful components based on shadcn/ui
• 📚 Storybook for component documentation and testing
• 🔧 TypeScript support
• 🎯 TailwindCSS for styling
• 📦 Ready to be packaged and used in Next.js projects
• 🌙 Dark mode support
• ♿ Accessibility-first design

Getting Started

Installation

npm install

Development

Start Storybook development server:

npm run storybook

Build the library:

npm run build

Build Storybook for production:

npm run build-storybook

Usage in Next.js Project

1. Install the package in your Next.js project:

npm install erp-theme

2. Import TailwindCSS configuration in your tailwind.config.js:

import type { Config } from "tailwindcss";
import erpThemeConfig from "erp-theme/tailwind.config";

const config: Config = {
  ...erpThemeConfig,
  content: [
    // your existing content paths
    "./node_modules/erp-theme/dist/**/*.{js,ts,jsx,tsx}",
    ...erpThemeConfig.content,
  ],
};

export default config;

3. Import the CSS variables in your global CSS:

@import "erp-theme/dist/globals.css";

4. Use the components:

import { Button, Card, CardContent, CardHeader, CardTitle } from "erp-theme";

export default function MyPage() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Hello World</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Click me</Button>
      </CardContent>
    </Card>
  );
}

Components

• Button - Versatile button component with multiple variants
• Card - Card container with header, content, and footer sections

More components coming soon!

Development

Project Structure

src/
├── components/
│   └── ui/
│       ├── button.tsx
│       ├── button.stories.tsx
│       ├── card.tsx
│       └── card.stories.tsx
├── lib/
│   └── utils.ts
└── index.ts

Adding New Components

1. Create the component in src/components/ui/
2. Create corresponding stories in the same directory
3. Export the component from src/index.ts
4. Update this README

Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

License

MIT