Modern UI Library Template

A starter template for building modern, accessible React component libraries with TypeScript, Tailwind CSS, and Radix UI primitives.

View on npm.
View on Bundlephobia.

Tech Stack

• React - UI framework
• TypeScript - Type safety
• Tailwind CSS - Utility-first styling
• Radix UI - Accessible component primitives
• Vite - Build tool and bundler
• Storybook - Component documentation and development
• ESLint - Code linting
• Prettier - Code formatting
• Lefthook - Git hooks management

Features

• Tree-shakeable - Optimized bundle size with tree-shaking support
• Storybook documentation - Interactive component playground and documentation
• Light and dark mode - Built-in theme support
• Code linting and formatting - Automated code quality with ESLint and Prettier
• Pre-commit hooks - Automated checks before commits via Lefthook
• Accessible - Components built on Radix UI primitives

Usage

1. Installation:

   npm i modern-ui-lib

2. Import CSS:

   @import "modern-ui-lib/css/main.css";

3. Import the components:

   import { Button } from 'modern-ui-lib'
   
   function App() {
     return <Button>Click me</Button>
   }

Development

Prerequisites

• Node.js (v18 or higher)
• npm

Installation

1. Clone the repository:

git clone [email protected]:rbika/modern-ui-lib.git
cd modern-ui-lib

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

This will start Storybook on http://localhost:6006 where you can view and develop components.

Available Scripts

• npm run dev - Start Storybook development server
• npm run build - Build the library for production
• npm run build:storybook - Build static Storybook site
• npm run lint - Run TypeScript type checking and ESLint
• npm run prettier - Format code with Prettier

License

MIT license.