@jonasui/ui

A theme-agnostic React UI component library built with Tailwind CSS and Atomic Design principles.

Installation

npm install @jonasui/ui

Peer Dependencies (required):

npm install react react-dom tailwindcss

Setup

1. Configure Tailwind CSS

Add the library path to your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // Your project files
    './src/**/*.{js,ts,jsx,tsx}',
    // JonasUI components
    './node_modules/@jonasui/ui/dist/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      // Your custom theme
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },
  plugins: [],
}

2. Add CSS Variables

Add these CSS variables to your global CSS file:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
  }
}

Usage

Button Component

import { Button } from '@jonasui/ui'

// Basic usage
<Button>Click me</Button>

// Variants
<Button variant="default">Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

// Sizes
<Button size="default">Default</Button>
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
<Button size="icon">
  <Icon />
</Button>

// Disabled state
<Button disabled>Disabled</Button>

// Composition with asChild
<Button asChild>
  <a href="/link">Link Button</a>
</Button>

// Custom styling
<Button className="w-full">Full Width</Button>

Components

Atoms

• Button - Interactive button component with multiple variants and sizes

Molecules (Coming Soon)

• FormField - Label + Input + Error message composition

Organisms (Coming Soon)

• LoginForm - Complete login form with validation

Atomic Design Structure

This library follows Atomic Design methodology:

src/
├── atoms/        # Basic building blocks (Button, Input, Label)
├── molecules/    # Simple compositions (FormField, SearchBar)
├── organisms/    # Complex components (LoginForm, Navbar)
└── index.ts      # Main exports

Features

• ✅ TypeScript - Full type support
• ✅ Tailwind CSS - Utility-first styling
• ✅ Atomic Design - Scalable component organization
• ✅ Shadcn UI Patterns - Battle-tested component patterns
• ✅ Radix UI Primitives - Accessible, unstyled components
• ✅ Composition - Flexible asChild prop for custom elements
• ✅ Theme-Agnostic - Bring your own Tailwind theme
• ✅ Tree-Shakeable - Only import what you need

Development

# Install dependencies
npm install

# Run development server
npm run dev

# Run tests
npm test

# Build for production
npm run build

License

MIT