@artisanpack-ui/react

56+ React UI components for building modern web applications, styled with DaisyUI and Tailwind CSS. Part of the ArtisanPack UI ecosystem.

Installation

npm install @artisanpack-ui/react @artisanpack-ui/tokens

Peer Dependencies

npm install react react-dom

Optional peers for chart components:

npm install apexcharts react-apexcharts

Setup

Import the tokens CSS in your Tailwind entry file:

@import "tailwindcss";
@import "@artisanpack-ui/tokens/css";

Usage

import { Button, Input, Card, ThemeProvider } from '@artisanpack-ui/react';

function App() {
  return (
    <ThemeProvider>
      <Card>
        <Input label="Email" type="email" />
        <Button color="primary">Submit</Button>
      </Card>
    </ThemeProvider>
  );
}

Tree-Shakeable Imports

Import from specific categories to minimize bundle size:

import { Button, Input, Select } from '@artisanpack-ui/react/form';
import { Card, Modal, Tabs } from '@artisanpack-ui/react/layout';
import { Menu, Breadcrumbs } from '@artisanpack-ui/react/navigation';
import { Table, Badge, Avatar } from '@artisanpack-ui/react/data';
import { Alert, Toast, Loading } from '@artisanpack-ui/react/feedback';
import { Icon, ThemeToggle, Tooltip } from '@artisanpack-ui/react/utility';

Component Categories

• 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

Theming

All components support DaisyUI's 31 built-in themes plus custom themes:

import { ThemeProvider, ThemeToggle } from '@artisanpack-ui/react';

<ThemeProvider defaultColorScheme="system">
  <ThemeToggle />
  {/* your app */}
</ThemeProvider>

React Compatibility

Supports both React 18 and React 19.

Documentation

• Getting Started
• Component API Reference
• Theming Guide

Part of ArtisanPack UI

| Package | Description | |---------|-------------| | @artisanpack-ui/tokens | Design tokens, color resolver, glass helpers | | @artisanpack-ui/react | 56+ React UI components | | @artisanpack-ui/react-laravel | Inertia.js adapter wrappers |

License

MIT - Jacob Martella