A comprehensive React UI component ecosystem for building modern web applications. Includes 56+ components styled with DaisyUI and Tailwind CSS, a shared design tokens package, and first-class Laravel / Inertia.js integration.
| Package | Description |
|---|---|
@artisanpack-ui/tokens |
Design tokens — colors, spacing, typography, shadows, animations, glass morphism presets |
@artisanpack-ui/react |
56+ React UI components (form, layout, navigation, data display, feedback, utility) |
@artisanpack-ui/react-laravel |
Inertia.js adapter wrappers for navigation, forms, auth, and toast integration |
# Core components
npm install @artisanpack-ui/react @artisanpack-ui/tokens
# With Laravel/Inertia support
npm install @artisanpack-ui/react-laravelnpm install react react-dom tailwindcss daisyui@artisanpack-ui/react-laravel also requires @inertiajs/react.
Import the tokens CSS in your Tailwind entry file:
@import "tailwindcss";
@import "@artisanpack-ui/tokens/css";import { Button, Input, Card } from '@artisanpack-ui/react';
import { ThemeProvider } from '@artisanpack-ui/react';
function App() {
return (
<ThemeProvider>
<Card>
<Input label="Email" type="email" />
<Button color="primary">Submit</Button>
</Card>
</ThemeProvider>
);
}import { useInertiaForm, AppLayout, createLayout } from '@artisanpack-ui/react-laravel';
import { Input, Button } from '@artisanpack-ui/react';
function LoginPage() {
const { form, field } = useInertiaForm({ email: '', password: '' });
return (
<form onSubmit={(e) => { e.preventDefault(); form.post('/login'); }}>
<Input label="Email" {...field('email')} />
<Input label="Password" type="password" {...field('password')} />
<Button color="primary" loading={form.processing}>Log In</Button>
</form>
);
}
LoginPage.layout = createLayout(AppLayout);- Form — Button, Input, Select, Checkbox, Toggle, DatePicker, ColorPicker, RichTextEditor, and more
- Layout — Card, Modal, Tabs, Accordion, Drawer, Dropdown, Grid, Stack, Popover
- Navigation — Menu, Breadcrumbs, Pagination, Steps, Navbar, Sidebar, SpotlightSearch
- Data Display — Table, Chart, Calendar, Avatar, Badge, Progress, Stat, Timeline, Carousel, Code, Diff
- Feedback — Alert, Toast, Loading, Skeleton, EmptyState, ErrorDisplay
- Utility — Icon, ThemeToggle, Tooltip, Clipboard, Markdown
All components support DaisyUI's 31 built-in themes plus custom themes. Wrap your app with ThemeProvider to enable dark/light/system mode:
import { ThemeProvider, ThemeToggle } from '@artisanpack-ui/react';
<ThemeProvider defaultColorScheme="system">
<ThemeToggle />
{/* your app */}
</ThemeProvider>All packages support both React 18 and React 19.
- Getting Started
- Component API Reference
- Design Tokens Guide
- Theming Guide
- Laravel / Inertia Integration
- Migration from Livewire
- React 18 vs 19 Compatibility
- Releasing
git clone https://github.com/ArtisanPack-UI/react.git
cd react
npm install
npm run build
npm run storybook # View components at http://localhost:6006
npm test # Run test suitesSee CONTRIBUTING.md for the full development guide.
MIT — Jacob Martella