A comprehensive React + Tailwind components library for building modern web apps
npm install @dreamtree-org/twreact-uiA comprehensive React + Tailwind CSS components library for building modern web applications. Built with accessibility, customization, and developer experience in mind.
- 🎨 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
``bash`
npm install @dreamtree-org/twreact-uior
yarn add @dreamtree-org/twreact-ui
`jsx
import { Button, Input, Card } from '@dreamtree-org/twreact-ui';
function App() {
return (
Components
$3
#### Button
Versatile button component with multiple variants and states.
Props:
-
: '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`jsx
`#### Input
Enhanced text input with validation states, icons, and clear functionality.
Props:
-
: '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`jsx
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:
-
: 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`jsx
{ value: 'us', label: 'United States' },
{ value: 'ca', label: 'Canada' }
]}
multiSelect
searchable
placeholder="Choose countries"
/>
`#### Form
Declarative form builder with validation support.
Props:
-
: Array
- onSubmit: (data: any) => void
- defaultValues: object
- validationSchema: any
- submitText: string (default: 'Submit')
- resetText: string (default: 'Reset')
- showReset: boolean (default: true)`jsx
const formFields = [
{
type: 'text',
name: 'firstName',
label: 'First Name',
required: true,
placeholder: 'Enter your first name'
},
{
type: 'email',
name: 'email',
label: 'Email',
required: true
}
];
onSubmit={(data) => console.log(data)}
submitText="Create Account"
/>
`#### Table
Feature-rich data table with sorting, filtering, and pagination.
Props:
-
: Arraycolumns: 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)`jsx
const columns = [
{ key: 'name', label: 'Name', sortable: true },
{ key: 'email', label: 'Email', sortable: true },
{ key: 'role', label: 'Role' }
];
data={users}
sortable
filterable
pagination
pageSize={10}
/>
`#### DatePicker
Calendar-based date selection with keyboard navigation.
Props:
-
: 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)`jsx
minDate={new Date('1900-01-01')}
maxDate={new Date()}
placeholder="Select your birth date"
/>
`$3
#### Sidebar
Collapsible sidebar navigation with nested items.
Props:
-
: Array
- collapsed: boolean (default: false)
- onToggle: () => void
- logo: ReactNode
- user: {name: string, email: string, avatar?: string, menuItems?: ArrayonUserClick: (user: object) => void`jsx
const sidebarItems = [
{
id: 'dashboard',
label: 'Dashboard',
icon:
active: true
},
{
id: 'users',
label: 'Users',
icon:
children: [
{ id: 'all-users', label: 'All Users' },
{ id: 'new-user', label: 'Add New User' }
]
}
];
logo={
Dreamtree}
user={{ name: 'John Doe', email: 'john@example.com' }}
/>
`#### Navbar
Top navigation bar with user menu and notifications.
Props:
-
: ReactNode
- items: Array
- user: {name: string, email: string, avatar?: string, menuItems?: Arraynotifications: Array
- searchable: boolean
- onSearch: (term: string) => void
- onNotificationClick: (notifications: Array) => void
- onUserClick: (user: object) => void
- leftIcon: ReactNode | false
- onLeftIconClick: () => void`jsx
items={navItems}
user={user}
notifications={notifications}
searchable
onSearch={(term) => console.log(term)}
/>
`$3
#### Alert
Status messages and notifications with different variants.
Props:
-
: 'success' | 'error' | 'warning' | 'info' (default: 'info')
- title: string
- children: ReactNode
- dismissible: boolean
- onDismiss: () => void`jsx
Your changes have been saved successfully.
`#### Toast
Notification messages with different types and positions.
Props:
-
: 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'`jsx
import { useToast, ToastContainer } from 'dreamtree-ui';function App() {
const { toast, toasts, removeToast } = useToast();
const showSuccess = () => {
toast.success('Success!', 'Your changes have been saved.');
};
return (
);
}
`$3
#### Card
Content containers with header, body, and footer sections.
Props:
-
: ReactNode
- hover: boolean
- className: string`jsx
Card Title
Card description
Card content goes here
`#### Avatar
User profile images with fallbacks and status indicators.
Props:
-
: 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'`jsx
name="John Doe"
size="lg"
status="online"
/>
`#### Badge
Status indicators and labels with different variants.
Props:
-
: ReactNode
- variant: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'outline' (default: 'default')
- size: 'sm' | 'md' | 'lg' (default: 'md')
- rounded: boolean (default: true)`jsx
Active
`#### Tabs
Tabbed content organization with different styles.
Props:
-
: 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`jsx
const tabItems = [
{
id: 'overview',
label: 'Overview',
content: Overview content
},
{
id: 'settings',
label: 'Settings',
content: Settings content
}
];
`Theming
Dreamtree UI supports custom theming through Tailwind CSS configuration:
js
// 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:
jsx
import { ThemeProvider } from 'dreamtree-ui';function App() {
return (
{/ Your app content /}
);
}
`Examples
$3
jsx
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 (
Contact Information
Please fill out the form below
onSubmit={handleSubmit}
submitText="Send Message"
/>
);
}
`$3
jsx
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: 'john@example.com',
status: 'Active'
},
{
id: 2,
name: 'Jane Smith',
email: 'jane@example.com',
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 (
data={data}
sortable
filterable
pagination
pageSize={10}
actions={actions}
/>
);
}
``We welcome contributions! Please see our Contributing Guide for details.
MIT License - see LICENSE for details.
- 📖 Documentation
- 🐛 Issue Tracker
- 💬 Discussions