Every component has the same props, parts, events and keyboard behavior in each stack it ships in. All but three ship in all three stacks; ImageLibrary...
Every component has the same props, parts, events and keyboard behavior in each stack it ships in. All but three ship in all three stacks; ImageLibrary, StreamableContent and ThemePreview are Livewire-only. Each component's page has a tab per stack (Blade, React and Vue) with live examples, and tables of its props, parts, slots and events.
| Stack |
Tag or import |
| Livewire / Blade |
<x-artisanpack-button> |
| React |
import { Button } from '@artisanpack-ui/react' |
| Vue |
import { Button } from '@artisanpack-ui/vue' |
Names follow each stack's conventions: leadingIcon in React and Vue is leading-icon in Blade, and a value bound with value and onValueChange in React is v-model in Vue and wire:model in Livewire. The component pages show the right form under each tab.
Actions
| Component |
Description |
| Button |
Triggers an action. |
| Link |
Navigates somewhere. |
| Clipboard |
Copies a value with clear confirmation: a copy button, an icon button with a confirmation tooltip, or a copy field showing the value beside its button. |
| Swap |
A two-state toggle that swaps its on and off content, such as a sun and a moon: a native checkbox with an accessible name over the content, with an optional fade or rotate. |
| Component |
Description |
| Form |
A native form that lays out its fields with the field gap and ends with an actions row. |
| Fieldset |
Groups related fields under a legend (title and description), as a panel, a divided section or plain. |
| Input |
Single-line text entry with a visible label, hint and error. |
| Password |
Password entry in Input's field anatomy, with a reveal toggle, an optional strength meter and live requirements. |
| Pin |
A row of single-character cells for one-time codes. |
| Textarea |
Multi-line text entry. |
| Select |
Chooses one value from a short list with the native select element. |
| Combobox |
A text input that filters a listbox: pick one match, or several shown as removable chips, and optionally create a value that isn't listed. |
| Checkbox |
Turns one option on or off, or selects items in a list or table. |
| CheckboxGroup |
A labeled set of related checkboxes in a fieldset, with a shared hint and error, an optional select-all box, columns and a cards layout. |
| RadioGroup |
Chooses exactly one option from a small set, with native radios in a fieldset. |
| Toggle |
A switch for settings that take effect immediately: a native checkbox with role=switch in Checkbox's field anatomy. |
| Range |
A slider for one value, or two thumbs for a from–to range. |
| Rating |
Shows or collects a star score. |
| ColorPicker |
A color field: a swatch that opens a popover (saturation and brightness area, hue and opacity sliders, format select, eyedropper and preset swatches) and a text value that is always available for typing. |
| DatePicker |
A text field with a calendar popover for a single date or a range, and with time it's DateTime: date and time in one field. |
| File |
Uploads files by dropping or browsing: a native file input over a drop zone, and a list of the chosen files with their size, progress, errors and a remove button. |
| Signature |
Captures a signature by drawing, typing or uploading. |
| ValidationSummary |
Lists every error in a form after a failed submit, each linked to its field. |
Editors and content
| Component |
Description |
| RichTextEditor |
Formatted text editing with a toolbar over the shared prose styles. |
| CodeEditor |
Editable code in a native textarea, with file tabs, a language select, line numbers, the active line, diagnostics listed in text and a status bar. |
| Markdown |
Renders GitHub-flavored Markdown (tables, task lists, strikethrough, autolinks) with the shared prose styles, and optionally edits it: write and split modes add Write, Preview and Split tabs over a Textarea. |
| Code |
Read-only code: a block with a header (file name, language and a copy button), optional line numbers and highlighted lines, or inline code in running text. |
| Kbd |
A keyboard key or shortcut, as kbd elements. |
| Diff |
Shows the changes between two versions of a text, unified or side by side, with hunks of context around each change and the changed words marked. |
| Heading |
A title from the type scale. |
| Text |
Body text with a size, tone and weight, cut to one line with truncate or to a number of lines with clamp. |
| Divider |
Separates content with a muted rule: horizontal, vertical or with a label in the middle. |
| Icon |
One Lucide icon from the registry at four sizes, or in a soft-colored tile. |
Data display
| Component |
Description |
| Badge |
A small, non-interactive label for a status, category or count. |
| Avatar |
A person or organization as an image, initials or an icon. |
| Stat |
A single headline number with its label, its change and the context for it. |
| KpiCard |
A headline metric in a Card: a Stat's label, value and change, with a sparkline of its trend beside the value and, when there is one, progress toward a target. |
| Sparkline |
A word-sized trend with no axes: a line, an area or bars, drawn as inline SVG. |
| Table |
Rows of structured data in real table markup: a toolbar with a title, sortable headers, row selection with a select-all box, expandable rows, loading and empty states, and a footer with Pagination. |
| Chart |
A bar, line, area or donut chart in a Card, drawn as inline SVG from tokens: series colors --apui-chart-1…6 in fixed order, a recessive grid, and a tooltip on hover and keyboard focus of each mark. |
| Timeline |
Events in order, newest or oldest first, each with an icon or dot marker, a head, a time and optional body text or a card. |
| ListItem |
A row with leading, title, description and trailing parts. |
| Calendar |
Events on a month grid, a week, a day or an agenda list, with Today, previous and next, view tabs and an optional New event button. |
Feedback
| Component |
Description |
| Alert |
An inline message about the state of a page or section: what happened and what to do next. |
| Toast |
A brief, non-blocking message about something that just happened. |
| Loading |
Shows that work is in progress: a spinner or three dots, inline with a label or as an overlay over the region that is loading. |
| Progress |
Linear progress: determinate, indeterminate or segmented into steps, with an optional label and value above the track. |
| ProgressRadial |
Circular progress with the value in the center, built from Progress: for a single headline percentage. |
| Skeleton |
A placeholder shape that matches the layout while content loads: a block, a line of text or a circle. |
| StreamableContent |
Content that arrives over time, such as a generated summary, with waiting, streaming, done, error and stopped states. (Livewire only) |
| EmptyState |
Explains why there's nothing here and what to do next: an icon tile, a title, a description and usually one primary action. |
| ErrorState |
Explains what failed, what's safe and how to recover, in place of content that couldn't load: an icon tile or a large status number, a title, a description, a reference code people can quote and recovery actions. |
Overlays
| Component |
Description |
| Dialog |
A modal window for a focused task or a confirmation. |
| Drawer |
A panel that slides in from an edge for filters, details or secondary tasks. |
| Popover |
An anchored, non-modal panel with interactive content, for a short task tied to one control. |
| Tooltip |
A short label shown on hover and keyboard focus. |
| DropdownMenu |
A list of actions or options anchored to a trigger button: action, checkbox and radio items, in groups with labels. |
| Spotlight |
A command palette: search across pages, records and actions. |
Navigation
| Component |
Description |
| Navbar |
The top bar: a brand, primary links or a search, and account actions, as a full-width bar or an island. |
| Menu |
A navigation list in a nav landmark: links with icons and badges, section titles, separators and collapsible sub-menus, with the current page marked. |
| UserMenu |
The account menu: an avatar button that opens a DropdownMenu with the person's identity, a workspace switcher, a theme control, your items and Log out, which always comes last. |
| Tabs |
Switches between views of the same content: a tablist of triggers and one panel per tab. |
| Steps |
Shows progress through a sequence: an ordered list of steps, each complete, current, upcoming or in error. |
| Pagination |
Moves between the pages of a long list: previous and next, the first and last pages, the pages around the current one, and an optional summary. |
| Breadcrumbs |
Shows where the current page sits in the hierarchy: a trail of links ending in the current page. |
Disclosure
| Component |
Description |
| Accordion |
Stacked sections that expand and collapse: each item is a heading holding a button that shows or hides its panel. |
| Collapse |
A single disclosure: a button that shows and hides one region, such as advanced settings, or a read-more that clamps long text behind a fade. |
Layout
| Component |
Description |
| AppShell |
The application frame: a sidebar and a main column (an optional top bar, then the content) as islands separated by a gutter. |
| PageHeader |
The title block at the top of a page: breadcrumbs, then the title with its description and meta beside the actions, then tabs. |
| Card |
The default container: a surface with an edge, plus optional media, header, body and footer parts. |
| Grid |
A layout primitive: its children in equal columns, with the gap from the space scale. |
| Stack |
A layout primitive: its children in a column or a row, with the gap from the space scale, alignment and optional wrapping. |
| Component |
Description |
| ImageGallery |
A grid of images that opens a lightbox: a dark dialog with the image, a counter and caption, previous and next buttons, thumbnails and arrow keys that follow the text direction. |
| ImageLibrary |
A media manager: search, switch between grid and list, select one or many assets, upload, and inspect an asset in a details panel with editable alt text. (Livewire only) |
| Carousel |
Scroll-snapped slides with previous and next buttons and position dots, on the carousel machine ImageSlider uses. |
| ImageSlider |
One large image per view with a glass caption, a counter, previous and next buttons, dots and optional thumbnails, on the carousel machine. |
Theme
| Component |
Description |
| ThemeToggle |
Lets people choose light, dark, high contrast or system. |
| ThemePreview |
Selectable cards that show a live miniature of each theme or preset: a radio group whose miniatures are drawn with the real tokens, by setting data-theme and data-preset on each miniature, so they stay accurate after a rebrand. (Livewire only) |
Shared conventions
- Colors and variants are the same everywhere:
color takes primary, secondary, accent, neutral, success, warning, error or info, and variant takes the component's variants, such as solid, soft, outline, ghost or link. See Color.
- Sizes run
xs to xl where a component has them. Sizes don't change with density.
- Form fields share one anatomy: a label, the control, a hint and an error, all wired with
aria-describedby. Attributes such as name, required and autocomplete go to the native control.
- Icons are names from the icon registry, or your own SVG in a slot.
- Every part can take extra classes through the
classes prop. See Component Markup.
- Strings the components render on their own (close buttons, "No results", screen-reader announcements) are props ending in
Label (closeLabel, emptyLabel), so you can translate them.
