# @dreamtree-org/twreact-ui — Documentation

A React + Tailwind component library for building modern web apps.

---

## Quick start

### Install

```bash
npm install @dreamtree-org/twreact-ui
# or
yarn add @dreamtree-org/twreact-ui
# or
pnpm add @dreamtree-org/twreact-ui
```

### Peer dependencies

Ensure **React 18+** and **react-dom** are installed:

```bash
npm install react react-dom
```

### Basic usage

Wrap your app with the store provider (if using store/Toast), then import components and styles:

```jsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Button, Input, Alert } from '@dreamtree-org/twreact-ui';
// Styles are included when you import the package
import '@dreamtree-org/twreact-ui/dist/index.css';

function App() {
  return (
    <div className="p-4">
      <Button variant="primary">Click me</Button>
      <Input label="Email" placeholder="you@example.com" />
      <Alert variant="info" title="Note">Welcome to the app.</Alert>
    </div>
  );
}

createRoot(document.getElementById('root')).render(<App />);
```

### With Store & Toast (optional)

```jsx
import { StoreProvider, ToastContainer, useToast } from '@dreamtree-org/twreact-ui';

function App() {
  return (
    <StoreProvider>
      <ToastContainer toasts={toasts} onRemove={removeToast} />
      <YourRoutes />
    </StoreProvider>
  );
}
```

---

## Component overview

| Component | Category | Description | Doc |
|-----------|----------|-------------|-----|
| [Input](Input.md) | Core | Text input with label, error, clear, password toggle | [Input.md](Input.md) |
| [Button](Button.md) | Core | Button with variants, sizes, loading, icons | [Button.md](Button.md) |
| [Select](Select.md) | Core | Single/multi select, searchable, grouped, creatable | [Select.md](Select.md) |
| [Table](Table.md) | Core | Data table with sort, filter, pagination, selection | [Table.md](Table.md) |
| [Form](Form.md) | Core | Form wrapper with react-hook-form integration | [Form.md](Form.md) |
| [Accordion](Accordion.md) | Core | Expandable/collapsible content panels | [Accordion.md](Accordion.md) |
| [Checkbox](Checkbox.md) | Core | Checkbox with label, sizes, indeterminate | [Checkbox.md](Checkbox.md) |
| [ColorPicker](ColorPicker.md) | Core | Color selection input | [ColorPicker.md](ColorPicker.md) |
| [DatePicker](DatePicker.md) | Core | Single date picker | [DatePicker.md](DatePicker.md) |
| [DateRangePicker](DateRangePicker.md) | Core | Start/end date range picker | [DateRangePicker.md](DateRangePicker.md) |
| [Loader](Loader.md) | Core | Loading spinner | [Loader.md](Loader.md) |
| [PriceRangePicker](PriceRangePicker.md) | Core | Min/max price or number range | [PriceRangePicker.md](PriceRangePicker.md) |
| [ProgressBar](ProgressBar.md) | Core | Progress bar (percentage) | [ProgressBar.md](ProgressBar.md) |
| [Radio](Radio.md) | Core | Radio button group | [Radio.md](Radio.md) |
| [Rate](Rate.md) | Core | Star rating input | [Rate.md](Rate.md) |
| [RoundedTag](RoundedTag.md) | Core | Tag/chip display | [RoundedTag.md](RoundedTag.md) |
| [Skeleton](Skeleton.md) | Core | Skeleton placeholder | [Skeleton.md](Skeleton.md) |
| [Switch](Switch.md) | Core | Toggle switch | [Switch.md](Switch.md) |
| [Tabs](Tabs.md) | Core | Tabbed content | [Tabs.md](Tabs.md) |
| [ThreeDotPopover](ThreeDotPopover.md) | Core | Actions menu (e.g. Edit, Delete) | [ThreeDotPopover.md](ThreeDotPopover.md) |
| [Tooltip](Tooltip.md) | Core | Tooltip on hover/focus | [Tooltip.md](Tooltip.md) |
| [LocationPicker](LocationPicker.md) | Core | Location/address picker | [LocationPicker.md](LocationPicker.md) |
| [SpeechToText](SpeechToText.md) | Core | Voice-to-text (Web Speech API) | [SpeechToText.md](SpeechToText.md) |
| [TextToSpeech](TextToSpeech.md) | Core | Text-to-speech playback | [TextToSpeech.md](TextToSpeech.md) |
| [Navbar](Navbar.md) | Navigation | Top navigation bar | [Navbar.md](Navbar.md) |
| [Sidebar](Sidebar.md) | Navigation | Side navigation / menu | [Sidebar.md](Sidebar.md) |
| [FootNav](FootNav.md) | Navigation | Bottom navigation (mobile) | [FootNav.md](FootNav.md) |
| [Breadcrumbs](Breadcrumbs.md) | Navigation | Breadcrumb trail | [Breadcrumbs.md](Breadcrumbs.md) |
| [Dialog](Dialog.md) | Feedback | Modal dialog | [Dialog.md](Dialog.md) |
| [Toast](Toast.md) | Feedback | Toast notifications + useToast | [Toast.md](Toast.md) |
| [Alert](Alert.md) | Feedback | Inline alert (info/success/warning/error) | [Alert.md](Alert.md) |
| [Badge](Badge.md) | Utility | Badge / count pill | [Badge.md](Badge.md) |
| [Avatar](Avatar.md) | Utility | User avatar (image or initials) | [Avatar.md](Avatar.md) |
| [Card](Card.md) | Utility | Card container | [Card.md](Card.md) |
| [Pagination](Pagination.md) | Utility | Page navigation controls | [Pagination.md](Pagination.md) |
| [Stepper](Stepper.md) | Utility | Step indicator | [Stepper.md](Stepper.md) |
| [FileUpload](FileUpload.md) | Utility | File upload input/zone | [FileUpload.md](FileUpload.md) |
| [Condition](Condition.md) | Utility | Conditional render wrapper | [Condition.md](Condition.md) |
| [Carousel](Carousel.md) | Utility | Image/content carousel | [Carousel.md](Carousel.md) |

---

## Hooks & utilities

- **useTheme** / **ThemeProvider** — Theme context
- **useMixins** — Store/get helpers, emitter, in-memory state
- **useApi** — Axios-based API hook
- **cn** — `cn(...classes)` for merging Tailwind classes
- **StoreProvider** — Redux store + persist wrapper

---

## Tailwind

The library uses Tailwind CSS classes (e.g. `primary-500`, `success-600`). Ensure your project uses Tailwind and that the same palette/theme is available, or include the library’s CSS so design tokens apply.

[← Back to repository](https://github.com/preethamkrishnadev/dreamtree-ui)