Menu
Table of Contents

React - v1.0.1

Getting Started

This guide walks you through installing the ArtisanPack UI React packages and rendering your first component.

Prerequisites

  • Node.js 18+
  • React 18 or 19
  • Tailwind CSS v4
  • DaisyUI v5

Installation

Install the core packages:

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

If you are building a Laravel / Inertia.js application, also install:

npm install @artisanpack-ui/react-laravel

Peer Dependencies

Make sure you have the required peer dependencies:

npm install react react-dom tailwindcss daisyui

For Laravel integration:

npm install @inertiajs/react

For chart components (optional):

npm install apexcharts react-apexcharts

Tailwind CSS Setup

Import the tokens CSS in your Tailwind entry file (e.g. app.css):

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

This registers design token CSS custom properties that components rely on.

Basic Usage

Wrap your application with ThemeProvider, then use any component:

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

function App() {
  return (
    <ThemeProvider>
      <Card>
        <Card.Header>
          <h2>Welcome</h2>
        </Card.Header>
        <Input label="Your name" placeholder="Enter your name" />
        <Button color="primary">Get Started</Button>
      </Card>
    </ThemeProvider>
  );
}

Tree-Shakeable Imports

You can import from category entry points to keep bundles small:

// Import only form components
import { Button, Input } from '@artisanpack-ui/react/form';

// Import only layout components
import { Card, Modal } from '@artisanpack-ui/react/layout';

// Import only navigation components
import { Menu, Breadcrumbs } from '@artisanpack-ui/react/navigation';

// Import data display components
import { Table, Badge } from '@artisanpack-ui/react/data';

// Import feedback components
import { Alert, Toast } from '@artisanpack-ui/react/feedback';

// Import utility components
import { Icon, Tooltip } from '@artisanpack-ui/react/utility';

TypeScript

All packages ship with TypeScript declarations. Props types are exported alongside components:

import { Button, type ButtonProps } from '@artisanpack-ui/react';

Next Steps