Jonathan Component Library

A modern React component library built with TypeScript, Vite, and Tailwind CSS.

Features

• 🎨 Modern Design: Clean, accessible components with Tailwind CSS
• 📦 TypeScript: Full type safety and IntelliSense support
• 🚀 Tree Shaking: Optimized bundle size with ES modules
• 📚 Storybook: Interactive component documentation
• 🎯 Accessible: Built with accessibility in mind
• 🔧 Customizable: Easy to theme and extend

Components

• Button: Various styles and sizes with different variants
• Input: Form inputs with labels, validation, and helper text
• Card: Flexible container components with different styles

Installation

npm install jonathan-component-library

Usage

import { Button, Input, Card } from 'jonathan-component-library';

function App() {
  return (
    <div>
      <Card title="Welcome">
        <Input label="Name" placeholder="Enter your name" />
        <Button variant="primary">Submit</Button>
      </Card>
    </div>
  );
}

Development

Prerequisites

• Node.js 18+
• npm or yarn

Setup

# Install dependencies
npm install

# Start development server
npm run dev

# Start Storybook
npm run storybook

# Build library
npm run build:lib

# Build Storybook
npm run build-storybook

Project Structure

src/
├── components/          # Component library
│   ├── Button/         # Button component
│   ├── Input/          # Input component
│   ├── Card/           # Card component
│   └── types/          # Shared types
├── index.ts            # Main export file
└── App.tsx             # Demo application

Scripts

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

License

MIT