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

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

Quick Start

import { Button, Input, Card } from '@dreamtree-org/twreact-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

Button

Versatile button component with multiple variants and states.

Props:

• variant: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'success' | 'warning' (default: 'primary')
• size: 'sm' | 'md' | 'lg' (default: 'md')
• disabled: boolean
• loading: boolean
• leftIcon: ReactNode
• rightIcon: ReactNode
• fullWidth: boolean
• className: string

<Button variant="primary" size="lg" loading>
  Loading...
</Button>

Input

Enhanced text input with validation states, icons, and clear functionality.

Props:

• type: 'text' | 'password' | 'email' | 'search' | 'number' | 'tel' | 'url'
• variant: 'default' | 'filled' | 'outlined'
• size: 'sm' | 'md' | 'lg' (default: 'md')
• label: string
• placeholder: string
• error: string
• success: string
• disabled: boolean
• required: boolean
• clearable: boolean
• icon: ReactNode
• iconPosition: 'left' | 'right' (default: 'left')
• showCount: boolean
• maxLength: number
• readOnly: boolean
• onClear: () => void

<Input
  type="email"
  label="Email Address"
  placeholder="Enter your email"
  error="Please enter a valid email"
  clearable
  required
/>

Select

Advanced select component with search, multi-select, and grouping support.

Props:

• options: Array<{value: any, label: string, disabled?: boolean}>
• value: any | Array
• onChange: (value: any) => void
• placeholder: string (default: 'Select an option...')
• label: string
• error: string
• disabled: boolean
• required: boolean
• multiSelect: boolean
• searchable: boolean
• grouped: boolean
• creatable: boolean
• onCreateOption: (value: string) => void
• onSearch: (term: string) => void
• loading: boolean
• selectAllOption: boolean
• closeOnSelect: boolean
• maxTagCount: number (default: 3)
• allowClear: boolean

<Select
  options={[
    { value: 'us', label: 'United States' },
    { value: 'ca', label: 'Canada' }
  ]}
  multiSelect
  searchable
  placeholder="Choose countries"
/>

Form

Declarative form builder with validation support.

Props:

• fields: Array
• onSubmit: (data: any) => void
• defaultValues: object
• validationSchema: any
• submitText: string (default: 'Submit')
• resetText: string (default: 'Reset')
• showReset: boolean (default: true)

const formFields = [
  {
    type: 'text',
    name: 'firstName',
    label: 'First Name',
    required: true,
    placeholder: 'Enter your first name'
  },
  {
    type: 'email',
    name: 'email',
    label: 'Email',
    required: true
  }
];

<Form
  fields={formFields}
  onSubmit={(data) => console.log(data)}
  submitText="Create Account"
/>

Table

Feature-rich data table with sorting, filtering, and pagination.

Props:

• data: Array
• columns: Array
• sortable: boolean (default: true)
• filterable: boolean
• selectable: boolean
• pagination: boolean
• pageSize: number (default: 10)
• onSort: (key: string, direction: 'asc' | 'desc') => void
• onFilter: (filters: object) => void
• onSelectionChange: (selectedRows: Set) => void
• onRowClick: (row: object) => void
• hasDetails: boolean
• DetailsComponent: ReactComponent
• withAction: boolean
• onAction: (action: string, row: object) => void
• actions: Array
• showSerial: boolean (default: true)

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

<Table
  columns={columns}
  data={users}
  sortable
  filterable
  pagination
  pageSize={10}
/>

DatePicker

Calendar-based date selection with keyboard navigation.

Props:

• value: Date | string
• onChange: (date: Date | null) => void
• placeholder: string (default: 'Select date...')
• label: string
• error: string
• disabled: boolean
• required: boolean
• minDate: Date | string
• maxDate: Date | string
• weekStartsOn: 0 | 1 (default: 0)
• portal: boolean
• displayFormat: string (default: 'MMM dd, yyyy')
• locale: Locale
• showClear: boolean (default: true)
• closeOnSelect: boolean (default: true)

<DatePicker
  label="Birth Date"
  minDate={new Date('1900-01-01')}
  maxDate={new Date()}
  placeholder="Select your birth date"
/>

Navigation Components

Sidebar

Collapsible sidebar navigation with nested items.

Props:

• items: Array
• collapsed: boolean (default: false)
• onToggle: () => void
• logo: ReactNode
• user: {name: string, email: string, avatar?: string, menuItems?: Array}
• onUserClick: (user: object) => void

const sidebarItems = [
  {
    id: 'dashboard',
    label: 'Dashboard',
    icon: <Home className="h-4 w-4" />,
    active: true
  },
  {
    id: 'users',
    label: 'Users',
    icon: <Users className="h-4 w-4" />,
    children: [
      { id: 'all-users', label: 'All Users' },
      { id: 'new-user', label: 'Add New User' }
    ]
  }
];

<Sidebar
  items={sidebarItems}
  logo={<div className="text-xl font-bold">Dreamtree</div>}
  user={{ name: 'John Doe', email: '[email protected]' }}
/>

Navbar

Top navigation bar with user menu and notifications.

Props:

• logo: ReactNode
• items: Array
• user: {name: string, email: string, avatar?: string, menuItems?: Array}
• notifications: Array
• searchable: boolean
• onSearch: (term: string) => void
• onNotificationClick: (notifications: Array) => void
• onUserClick: (user: object) => void
• leftIcon: ReactNode | false
• onLeftIconClick: () => void

<Navbar
  logo={<div className="text-xl font-bold">Dreamtree</div>}
  items={navItems}
  user={user}
  notifications={notifications}
  searchable
  onSearch={(term) => console.log(term)}
/>

Feedback Components

Alert

Status messages and notifications with different variants.

Props:

• variant: 'success' | 'error' | 'warning' | 'info' (default: 'info')
• title: string
• children: ReactNode
• dismissible: boolean
• onDismiss: () => void

<Alert variant="success" title="Success!" dismissible>
  Your changes have been saved successfully.
</Alert>

Toast

Notification messages with different types and positions.

Props:

• id: string
• title: string
• message: string
• type: 'success' | 'error' | 'warning' | 'info' (default: 'info')
• duration: number (default: 5000)
• onClose: (id: string) => void
• position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center'

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

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

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

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

Utility Components

Card

Content containers with header, body, and footer sections.

Props:

• children: ReactNode
• hover: boolean
• className: string

<Card hover>
  <Card.Header>
    <Card.Title>Card Title</Card.Title>
    <Card.Description>Card description</Card.Description>
  </Card.Header>
  <Card.Content>
    Card content goes here
  </Card.Content>
  <Card.Footer>
    <Button>Action</Button>
  </Card.Footer>
</Card>

Avatar

User profile images with fallbacks and status indicators.

Props:

• src: string
• alt: string
• name: string
• size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' (default: 'md')
• shape: 'circle' | 'square' | 'rounded' (default: 'circle')
• status: 'online' | 'offline' | 'away' | 'busy'

<Avatar
  src="https://example.com/avatar.jpg"
  name="John Doe"
  size="lg"
  status="online"
/>

Badge

Status indicators and labels with different variants.

Props:

• children: ReactNode
• variant: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'outline' (default: 'default')
• size: 'sm' | 'md' | 'lg' (default: 'md')
• rounded: boolean (default: true)

<Badge variant="success" size="sm">
  Active
</Badge>

Tabs

Tabbed content organization with different styles.

Props:

• items: Array<{id: string, label: string, content: ReactNode, icon?: ReactNode, badge?: string}>
• defaultActiveTab: string
• orientation: 'horizontal' | 'vertical' (default: 'horizontal')
• variant: 'default' | 'pills' | 'underline' (default: 'default')
• onTabChange: (tabId: string) => void

const tabItems = [
  {
    id: 'overview',
    label: 'Overview',
    content: <div>Overview content</div>
  },
  {
    id: 'settings',
    label: 'Settings',
    content: <div>Settings content</div>
  }
];

<Tabs items={tabItems} variant="pills" />

Theming

Dreamtree UI supports custom theming through Tailwind CSS configuration:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          100: '#dbeafe',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
        },
        success: {
          50: '#f0fdf4',
          100: '#dcfce7',
          500: '#22c55e',
          600: '#16a34a',
        },
        error: {
          50: '#fef2f2',
          100: '#fee2e2',
          500: '#ef4444',
          600: '#dc2626',
        },
        warning: {
          50: '#fffbeb',
          100: '#fef3c7',
          500: '#f59e0b',
          600: '#d97706',
        }
      }
    }
  }
}

Dark Mode

Enable dark mode with the built-in theme provider:

import { ThemeProvider } from 'dreamtree-ui';

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

Examples

Complete Form Example

import { Form, Button, Card } 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 (
    <Card>
      <Card.Header>
        <Card.Title>Contact Information</Card.Title>
        <Card.Description>Please fill out the form below</Card.Description>
      </Card.Header>
      <Card.Content>
    <Form
      fields={formFields}
      onSubmit={handleSubmit}
      submitText="Send Message"
    />
      </Card.Content>
    </Card>
  );
}

Data Table with Actions

import { Table, Button, Badge } from 'dreamtree-ui';

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

const data = [
  { 
    id: 1, 
    name: 'John Doe', 
    email: '[email protected]', 
    status: 'Active' 
  },
  { 
    id: 2, 
    name: 'Jane Smith', 
    email: '[email protected]', 
    status: 'Inactive' 
  }
];

const actions = [
  {
    label: 'Edit',
    onClick: (row) => console.log('Edit', row)
  },
  {
    label: 'Delete',
    onClick: (row) => console.log('Delete', row),
    variant: 'destructive'
  }
];

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

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

MIT License - see LICENSE for details.

Support

• 📖 Documentation
• 🐛 Issue Tracker
• 💬 Discussions