@preethamkrishna/twreact-ui/README.md

A comprehensive React + Tailwind components library for building modern web apps

# Dreamtree UI

A comprehensive React + Tailwind CSS components library for building modern web applications. Built with accessibility, customization, and developer experience in mind.

## Features

- 🎨 **Modern Design**: Clean, professional components with Tailwind CSS
- 🌙 **Dark Mode**: Built-in dark/light mode support
- ♿ **Accessible**: ARIA compliant with keyboard navigation
- 📱 **Responsive**: Mobile-first design approach
- 🎯 **TypeScript Ready**: Full TypeScript support
- 🧩 **Composable**: Flexible APIs with props, slots, and render functions
- 🎨 **Customizable**: Easy theming with Tailwind config
- 📦 **Tree Shakeable**: Import only what you need

## Installation

```bash
npm install dreamtree-ui
# or
yarn add dreamtree-ui
```

## Quick Start

```jsx
import { Button, Input, Card } from 'dreamtree-ui';

function App() {
  return (
    <div className="p-4">
      <Card>
        <Card.Header>
          <Card.Title>Welcome to Dreamtree UI</Card.Title>
        </Card.Header>
        <Card.Content>
          <Input placeholder="Enter your name" />
          <Button className="mt-4">Get Started</Button>
        </Card.Content>
      </Card>
    </div>
  );
}
```

## Components

### Core Components

- **Input** - Text inputs with validation states, icons, and clear functionality
- **Button** - Various button styles and states
- **Select** - Dropdown select with search, multi-select, and grouping
- **DatePicker** - Calendar-based date selection
- **Table** - Data tables with sorting, filtering, and pagination
- **Form** - Declarative form builder with validation

### Navigation

- **Sidebar** - Collapsible sidebar navigation
- **Navbar** - Top navigation bar with user menu
- **FootNav** - Mobile bottom navigation
- **Breadcrumbs** - Page hierarchy navigation

### Feedback & Overlay

- **Dialog** - Modal dialogs with customizable sizes
- **Toast** - Notification messages with different types
- **Tooltip** - Contextual help text
- **Alert** - Status messages and notifications
- **Loader** - Loading states and skeletons

### Utility Components

- **Tabs** - Tabbed content organization
- **Accordion** - Collapsible content sections
- **Badge** - Status indicators and labels
- **Avatar** - User profile images with fallbacks
- **Card** - Content containers with header/body/footer
- **Pagination** - Page navigation controls
- **Stepper** - Step-by-step process indicators
- **FileUpload** - Drag & drop file upload with preview

## Theming

Dreamtree UI supports custom theming through Tailwind CSS configuration:

```js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          500: '#3b82f6',
          600: '#2563eb',
          // ... your custom colors
        }
      }
    }
  }
}
```

## Dark Mode

Enable dark mode with the built-in theme provider:

```jsx
import { ThemeProvider } from 'dreamtree-ui';

function App() {
  return (
    <ThemeProvider defaultTheme="dark">
      {/* Your app content */}
    </ThemeProvider>
  );
}
```

## Examples

### Form with Validation

```jsx
import { Form } from 'dreamtree-ui';

const formFields = [
  {
    type: 'text',
    name: 'firstName',
    label: 'First Name',
    required: true,
    placeholder: 'Enter your first name'
  },
  {
    type: 'email',
    name: 'email',
    label: 'Email',
    required: true,
    placeholder: 'Enter your email'
  },
  {
    type: 'select',
    name: 'country',
    label: 'Country',
    options: [
      { value: 'us', label: 'United States' },
      { value: 'ca', label: 'Canada' }
    ]
  }
];

function ContactForm() {
  const handleSubmit = (data) => {
    console.log('Form data:', data);
  };

  return (
    <Form
      fields={formFields}
      onSubmit={handleSubmit}
      submitText="Send Message"
    />
  );
}
```

### Data Table

```jsx
import { Table } from 'dreamtree-ui';

const columns = [
  { key: 'name', label: 'Name', sortable: true },
  { key: 'email', label: 'Email', sortable: true },
  { key: 'role', label: 'Role' }
];

const data = [
  { name: 'John Doe', email: 'john@example.com', role: 'Admin' },
  { name: 'Jane Smith', email: 'jane@example.com', role: 'User' }
];

function UserTable() {
  return (
    <Table
      columns={columns}
      data={data}
      sortable
      filterable
      pagination
      pageSize={10}
    />
  );
}
```

### Toast Notifications

```jsx
import { useToast, ToastContainer } from 'dreamtree-ui';

function App() {
  const { toast, toasts, removeToast } = useToast();

  const showSuccess = () => {
    toast.success('Success!', 'Your changes have been saved.');
  };

  const showError = () => {
    toast.error('Error!', 'Something went wrong.');
  };

  return (
    <div>
      <button onClick={showSuccess}>Show Success</button>
      <button onClick={showError}>Show Error</button>
      <ToastContainer toasts={toasts} onRemove={removeToast} />
    </div>
  );
}
```

## Contributing

We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.

## License

MIT License - see [LICENSE](LICENSE) for details.

## Support

- 📖 [Documentation](https://dreamtree-ui.dev)
- 🐛 [Issue Tracker](https://github.com/dreamtree-ui/dreamtree-ui/issues)
- 💬 [Discussions](https://github.com/dreamtree-ui/dreamtree-ui/discussions)