# Dotti UI

A comprehensive retro-futuristic React UI library with 30+ components, theming, and accessibility built-in.

[![NPM Version](https://img.shields.io/npm/v/dotti-ui)](https://www.npmjs.com/package/dotti-ui)
[![NPM Downloads](https://img.shields.io/npm/dm/dotti-ui)](https://www.npmjs.com/package/dotti-ui)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## ✨ Features

- 🎯 **30+ Components** - Comprehensive set of accessible, customizable components
- 🎨 **Theme System** - Built-in dark mode and customizable theming
- ⚡ **TypeScript First** - Fully typed with excellent developer experience
- 📦 **Tree Shakeable** - Import only what you need for optimal bundle size
- ♿ **Accessible** - ARIA compliant with keyboard navigation support
- 🚀 **Retro-Futuristic** - Inspired by Teenage Engineering and Nothing OS
- 🔧 **Next.js App Router** - Fully compatible with server and client components

## 📦 Installation

```bash
npm install dotti-ui
```

## 🚀 Quick Start

```tsx
import { Button, ThemeProvider } from 'dotti-ui'
import 'dotti-ui/styles.css'

function App() {
  return (
    <ThemeProvider>
      <Button variant="primary" accent>
        Hello Dotti!
      </Button>
    </ThemeProvider>
  )
}
```

## 🎨 Components

### Layout
- `Container` - Responsive container wrapper
- `Grid` - Flexible grid system
- `Stack` - Vertical and horizontal stacking

### Form Controls  
- `Button` - Primary, secondary, and ghost variants
- `Input` - Text input with validation states
- `Checkbox` - Customizable checkboxes
- `Radio` - Radio button groups
- `Select` - Dropdown select component
- `Slider` - Range slider input
- `ToggleSwitch` - Toggle switch component

### Data Display
- `Card` - Content cards with variants
- `Badge` - Status and label badges
- `Avatar` - User profile images
- `Progress` - Progress bars and indicators
- `Table` - Data tables with sorting
- `Skeleton` - Loading placeholders

### Feedback
- `Alert` - Contextual alerts and notifications
- `Toast` - Toast notifications
- `Spinner` - Loading spinners
- `Modal` - Modal dialogs

### Navigation
- `Tabs` - Tab navigation
- `Breadcrumbs` - Breadcrumb navigation
- `Pagination` - Page navigation

### Overlay
- `Tooltip` - Contextual tooltips
- `Popover` - Popover content
- `Drawer` - Slide-out panels

### Theme
- `ThemeProvider` - Theme context provider
- `ThemeToggle` - Dark/light mode toggle

## 🎨 Theming

Dotti UI comes with a built-in theming system supporting light and dark modes:

```tsx
import { ThemeProvider, useTheme } from 'dotti-ui'

// Basic usage
function App() {
  return (
    <ThemeProvider defaultTheme="dark">
      <YourComponents />
    </ThemeProvider>
  )
}

// Custom theme
import { createCustomTheme } from 'dotti-ui'

const customTheme = createCustomTheme({
  colors: {
    accent: '#ff6b6b',
    primary: '#4ecdc4'
  }
})

function ThemedApp() {
  const { setTheme } = useTheme()
  
  React.useEffect(() => {
    setTheme(customTheme)
  }, [])
  
  return <YourComponents />
}
```

## 🔧 Next.js Integration

Dotti UI works seamlessly with Next.js App Router:

```tsx
// app/layout.tsx
import { ThemeProvider } from 'dotti-ui'
import 'dotti-ui/styles.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <ThemeProvider>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}
```

## 📚 Documentation

Visit our [documentation site](https://dotti-ui-docs.vercel.app) for:
- Component examples and API reference
- Theming guides  
- Getting started tutorials
- Design system guidelines

## 🤝 Contributing

We welcome contributions! Please see our [Contributing Guide](https://github.com/VishnuDileesh/dotti/blob/main/CONTRIBUTING.md) for details.

## 📄 License

MIT © [Vishnu Dileesh](https://github.com/VishnuDileesh)

---

<p align="center">
  <strong>Made with ❤️ for the React community</strong>
</p>