Components

Each component has a page in the design system documentation with a React tab, live examples, and tables of its props, parts and events. The tables below list every component in @artisanpack-ui/react 2.0, linked to that page, with the subpath it's exported from and the extra exports that go with it.

Importing

Every component, and its types, is exported from the package root and from one category subpath:

import { Button, Dialog } from '@artisanpack-ui/react';
import { Button } from '@artisanpack-ui/react/form';
import { Dialog } from '@artisanpack-ui/react/layout';

The subpaths are /form, /layout, /navigation, /data, /feedback and /utility. /chart exports only Chart, and /ai holds the AI Components, which the root doesn't export. See Bundle Size for when the subpaths matter.

React conventions

The props are the design system's shared API in React spelling (leadingIcon, onValueChange). A few things are specific to React.

Controlled and uncontrolled. Components with state work both ways, like native inputs. Pass the value and its change callback to control them, or a default to let them manage their own state:

The callbacks receive the new value itself (onValueChange={setEmail}), not an event. On form fields the native onChange still fires as well, except on Combobox, which has no onChange: use onValueChange, and onSearchChange for the typed text.

const [open, setOpen] = useState(false);

<Dialog open={open} onOpenChange={setOpen} title="Edit profile">
  …
</Dialog>;

Slots are props. Named slots on the component pages, such as a Card's title, actions and footer or a Dialog's footer and trigger, are props that take any React node. The default slot is children.

Data or children. Components made of items, such as Tabs, Menu, Accordion, Breadcrumbs, Steps and DropdownMenu, take either an array of item data (items, or tabs and steps) or child components (Tab, MenuItem, AccordionItem, …).

className and classes. className goes to the component's root element. classes adds classes to individual parts, using the part names on the component's page; classes.root is merged with className.

<Input label="Email" className="max-w-sm" classes={{ label: 'sr-only' }} />

On form fields, every other native attribute (name, autoComplete, aria-*, data-*, id) goes to the native control, not the root. Combobox is the exception: its native attributes go to the root <div>, so name the input with its label prop rather than aria-label, and name sets its hidden inputs (one per selected value). Each component's markup is documented, and your own CSS wins over the component styles without !important because of the cascade layers.

Refs. Components forward their ref. On form fields it points at the native control (<input>, <select>, <textarea>), except Combobox, whose ref is its root <div> (calling focus() on it won't focus the input). On CheckboxGroup, RadioGroup and Fieldset it points at the <fieldset>, and elsewhere at the root element or the element its documentation names.

Icons. Props such as leadingIcon take a name from the icon registry. registerIcons is also exported from @artisanpack-ui/react. Most of these props have a node counterpart (icon, iconEnd) for your own SVG.

Theme script. ThemeScript isn't a component on the design system pages; see Theming.

Actions

Forms

All in /form.

Editors and content

Data display

Feedback

Overlays

Navigation

Disclosure

All in /layout.

Layout

All in /layout.

Media

All in /data.

Theme

Livewire-only components

StreamableContent, ImageLibrary and ThemePreview are Livewire-only: the design system ships them in Livewire UI Components, not in React or Vue.

Deprecated components

These 1.x components are still exported so an app keeps building while it migrates. They're marked @deprecated and will be removed in a later major release. Each one is an alias: it renders its replacement, maps its 1.x props onto it, and warns once in development.

What changes when you keep a deprecated import:

• Refs point at the replacement's element: the dialog panel for Modal, the menu panel for Dropdown, the Spotlight panel, the fieldset for Radio and the textarea for Editor.
• Props with no equivalent are ignored: Modal's bottom (use a Drawer with side="bottom"), Dropdown's top and hover, SpotlightSearch's renderLink (give items an href), Sidebar's side and overlay, and Radio's color.
• Sidebar maps open to AppShell's collapsed, with the collapse button on, and a Tailwind width class such as w-64 to sidebarWidth.
• ToastProvider renders a Toaster for the shared toast, and useToast() calls toast.create(). Toast titles are strings, so a message that isn't text is reduced to its text. Toasts beyond max now queue instead of replacing the oldest, and dismissAll() also clears toasts created with toast.create().

The upgrade codemod rewrites most of these for you.