koadit-ui

A lightweight, accessible React component library with built-in dark mode, responsive design tokens, and smooth animations. Built for rapid prototyping and production apps.

Features

• 📦 12+ Pre-built React Components - Button, Card, Input, Select, Badge, Modal, Tabs, Accordion, BarChart, LineChart, PieChart, AreaChart
• 📊 Data Visualization - Built-in chart components powered by Recharts
• 🎨 Dark Mode Support - Built-in theme switching with persistence
• ⚡ Responsive Design - Mobile-first responsive components
• ✨ Smooth Animations - Optimized transitions and animations
• ♿ Accessible (WCAG compliant) - Keyboard navigation and ARIA support
• 🎯 TypeScript Support - Full type definitions included
• 🎭 Tailwind CSS Powered - Fully customizable with Tailwind
• 📚 Zero Dependencies - Only requires React & React DOM

Installation

npm install koadit-ui
# or
yarn add koadit-ui
# or
pnpm add koadit-ui

Quick Start

import { Button, Card, Input } from 'koadit-ui';

export default function App() {
  return (
    <Card>
      <h2>Welcome to koadit-ui</h2>
      <Input placeholder="Enter text..." />
      <Button>Submit</Button>
    </Card>
  );
}

Components

Button

A versatile button component with multiple variants and sizes.

import { Button } from 'koadit-ui';

export function ButtonExample() {
  return (
    <div className="flex gap-2">
      <Button variant="default">Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
    </div>
  );
}

Props:

• variant?: 'default' | 'secondary' | 'outline' | 'ghost' - Button style variant
• size?: 'sm' | 'md' | 'lg' - Button size

Card

A container component for grouping related content.

import { Card, CardHeader, CardContent, CardFooter } from 'koadit-ui';

export function CardExample() {
  return (
    <Card>
      <CardHeader>
        <h2>Card Title</h2>
      </CardHeader>
      <CardContent>
        Card content goes here
      </CardContent>
      <CardFooter>
        <Button>Action</Button>
      </CardFooter>
    </Card>
  );
}

Props:

• variant?: 'default' | 'outline' - Card style variant

Input

A text input component with error states and variants.

import { Input } from 'koadit-ui';
import { useState } from 'react';

export function InputExample() {
  const [value, setValue] = useState('');
  const [error, setError] = useState(false);

  return (
    <div>
      <Input
        placeholder="Enter your name..."
        value={value}
        onChange={(e) => setValue(e.target.value)}
        isError={error}
      />
    </div>
  );
}

Props:

• variant?: 'default' | 'outline' - Input style variant
• isError?: boolean - Show error state (red border)
• All standard HTMLInputElement attributes

Select

A dropdown select component.

import { Select } from 'koadit-ui';
import { useState } from 'react';

export function SelectExample() {
  const [selected, setSelected] = useState('');

  const options = [
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
    { label: 'Option 3', value: '3' },
  ];

  return (
    <Select
      options={options}
      placeholder="Choose an option..."
      value={selected}
      onChange={(e) => setSelected(e.target.value)}
    />
  );
}

Props:

• options: SelectOption[] - Array of { label: string; value: string | number }
• placeholder?: string - Placeholder text
• isError?: boolean - Show error state

Badge

A badge component for labels and tags.

import { Badge } from 'koadit-ui';

export function BadgeExample() {
  return (
    <div className="flex gap-2">
      <Badge variant="default">Active</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="destructive">Error</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="info">Info</Badge>
    </div>
  );
}

Props:

• variant?: 'default' | 'secondary' | 'outline' | 'destructive' | 'info' | 'success' | 'warning' - Badge style

Modal

A dialog modal component with backdrop.

import { Modal, ModalContent, ModalFooter, Button } from 'koadit-ui';
import { useState } from 'react';

export function ModalExample() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
      
      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Confirm Action"
        size="md"
      >
        <ModalContent>
          Are you sure you want to proceed?
        </ModalContent>
        <ModalFooter>
          <Button variant="outline" onClick={() => setIsOpen(false)}>
            Cancel
          </Button>
          <Button onClick={() => setIsOpen(false)}>
            Confirm
          </Button>
        </ModalFooter>
      </Modal>
    </>
  );
}

Props:

• isOpen: boolean - Control modal visibility
• onClose: () => void - Callback when closing
• title?: string - Modal title
• size?: 'sm' | 'md' | 'lg' | 'xl' - Modal size

Tabs

A tabbed interface component.

import { Tabs } from 'koadit-ui';

export function TabsExample() {
  const tabs = [
    {
      id: 'tab1',
      label: 'Tab 1',
      content: 'Content for tab 1'
    },
    {
      id: 'tab2',
      label: 'Tab 2',
      content: 'Content for tab 2'
    },
    {
      id: 'tab3',
      label: 'Tab 3',
      content: 'Content for tab 3'
    }
  ];

  return (
    <Tabs
      items={tabs}
      defaultValue="tab1"
      variant="default"
    />
  );
}

Props:

• items: TabItem[] - Array of tabs with { id: string; label: string; content: React.ReactNode }
• defaultValue?: string - Initially active tab
• variant?: 'default' | 'outline' | 'underline' - Tab style

Accordion

An expandable accordion component.

import { Accordion } from 'koadit-ui';

export function AccordionExample() {
  const items = [
    {
      id: 'item1',
      title: 'Question 1',
      content: 'Answer to question 1'
    },
    {
      id: 'item2',
      title: 'Question 2',
      content: 'Answer to question 2'
    },
    {
      id: 'item3',
      title: 'Question 3',
      content: 'Answer to question 3'
    }
  ];

  return (
    <Accordion
      items={items}
      allowMultiple={false}
      variant="default"
    />
  );
}

Props:

• items: AccordionItem[] - Array of items with { id: string; title: string; content: React.ReactNode }
• allowMultiple?: boolean - Allow multiple items open (default: false)
• variant?: 'default' | 'border' - Accordion style

Data Visualization

BarChart

A bar chart component for displaying categorical data.

import { BarChart } from 'koadit-ui';

export function BarChartExample() {
  const data = [
    { name: 'Jan', sales: 4000 },
    { name: 'Feb', sales: 3000 },
    { name: 'Mar', sales: 2000 },
    { name: 'Apr', sales: 2780 },
    { name: 'May', sales: 1890 },
  ];

  return (
    <BarChart
      data={data}
      dataKey="sales"
      xAxisKey="name"
      color="#3b82f6"
      height={300}
    />
  );
}

Props:

• data: any[] - Array of data objects
• dataKey: string - Key for the data values
• xAxisKey: string - Key for the x-axis labels
• color?: string - Bar color (default: '#3b82f6')
• height?: number - Chart height in pixels (default: 300)

LineChart

A line chart component for displaying trend data.

import { LineChart } from 'koadit-ui';

export function LineChartExample() {
  const data = [
    { time: '00:00', value: 0 },
    { time: '06:00', value: 22 },
    { time: '12:00', value: 30 },
    { time: '18:00', value: 25 },
    { time: '24:00', value: 15 },
  ];

  return (
    <LineChart
      data={data}
      dataKey="value"
      xAxisKey="time"
      color="#10b981"
      height={300}
    />
  );
}

Props:

• data: any[] - Array of data objects
• dataKey: string - Key for the data values
• xAxisKey: string - Key for the x-axis labels
• color?: string - Line color (default: '#10b981')
• height?: number - Chart height in pixels (default: 300)

PieChart

A pie chart component for showing proportional data.

import { PieChart } from 'koadit-ui';

export function PieChartExample() {
  const data = [
    { name: 'Product A', value: 400 },
    { name: 'Product B', value: 300 },
    { name: 'Product C', value: 200 },
    { name: 'Product D', value: 278 },
  ];

  return (
    <PieChart
      data={data}
      dataKey="value"
      nameKey="name"
      colors={['#3b82f6', '#10b981', '#f59e0b', '#ef4444']}
      height={300}
    />
  );
}

Props:

• data: any[] - Array of data objects
• dataKey: string - Key for the values
• nameKey: string - Key for the labels
• colors?: string[] - Array of hex colors for pie segments
• height?: number - Chart height in pixels (default: 300)

AreaChart

An area chart component for displaying filled trend data.

import { AreaChart } from 'koadit-ui';

export function AreaChartExample() {
  const data = [
    { date: '2024-01-01', revenue: 12000 },
    { date: '2024-01-02', revenue: 15000 },
    { date: '2024-01-03', revenue: 14000 },
    { date: '2024-01-04', revenue: 18000 },
    { date: '2024-01-05', revenue: 22000 },
  ];

  return (
    <AreaChart
      data={data}
      dataKey="revenue"
      xAxisKey="date"
      color="#8b5cf6"
      height={300}
    />
  );
}

Props:

• data: any[] - Array of data objects
• dataKey: string - Key for the data values
• xAxisKey: string - Key for the x-axis labels
• color?: string - Area color (default: '#8b5cf6')
• height?: number - Chart height in pixels (default: 300)

Hooks

useTheme

Manage theme switching with automatic persistence.

import { useTheme } from 'koadit-ui';

export function ThemeSwitcher() {
  const { theme, isDark, toggleTheme, setTheme } = useTheme();

  return (
    <div>
      <p>Current theme: {theme}</p>
      <p>Is dark: {isDark ? 'Yes' : 'No'}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
      <button onClick={() => setTheme('light')}>Light</button>
      <button onClick={() => setTheme('dark')}>Dark</button>
      <button onClick={() => setTheme('system')}>System</button>
    </div>
  );
}

Returns:

interface UseThemeReturn {
  theme: 'light' | 'dark' | 'system';
  isDark: boolean;
  toggleTheme: () => void;
  setTheme: (theme: 'light' | 'dark' | 'system') => void;
}

useMobile

Detect if the viewport is mobile size.

import { useMobile } from 'koadit-ui';

export function ResponsiveComponent() {
  const isMobile = useMobile();

  return isMobile ? <MobileView /> : <DesktopView />;
}

Returns: boolean - True if viewport width < 768px (Tailwind md breakpoint)

Utilities

cn

Conditional className utility for combining Tailwind classes.

import { cn } from 'koadit-ui';

export function Component() {
  const isActive = true;
  const className = cn(
    'px-4 py-2 rounded',
    isActive && 'bg-blue-500',
    !isActive && 'bg-gray-200'
  );

  return <div className={className}>Content</div>;
}

Dark Mode Setup

The library includes built-in dark mode support. To enable it in your app:

1. Initialize useTheme in your root component:

import { useTheme } from 'koadit-ui';

function App() {
  useTheme(); // Initializes theme management
  
  return <YourContent />;
}

2. Add dark mode styles to your Tailwind config:

// tailwind.config.js
module.exports = {
  darkMode: 'class', // or 'media'
  theme: {
    extend: {},
  },
  plugins: [],
};

3. The library automatically adds/removes the dark class to document.documentElement

Customization

All components use Tailwind CSS and can be customized through your Tailwind config or by passing custom className props.

import { Button } from 'koadit-ui';

export function CustomButton() {
  return (
    <Button 
      className="!bg-purple-500 hover:!bg-purple-600"
    >
      Custom Button
    </Button>
  );
}

Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

Development

# Clone the repository
git clone https://github.com/oluokunkabiru/koadit-ui.git
cd koadit-ui

# Install dependencies
npm install

# Start development server
npm run dev

# Build library
npm run build

# Run tests
npm test

# Lint code
npm run lint

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT © 2024 KOADIT Digital Solutions

Support

• 📖 Documentation
• 🐛 Report Issues
• 💬 Discussions

Changelog

See CHANGELOG.md for all version updates and changes.## License

MIT