The ArtisanPack UI design system is the shared foundation under every ArtisanPack UI component library. It defines the design tokens, the CSS, the interaction behavior and the component APIs once, and three stacks build on it:
| Stack | Package | Version |
|---|---|---|
| Livewire and Blade | artisanpack-ui/livewire-ui-components |
3.0 |
| React | @artisanpack-ui/react |
2.0 |
| Vue | @artisanpack-ui/vue |
2.0 |
A Button, a Combobox or a Dialog is the same component in all three: the same props, the same parts, the same keyboard behavior and the same markup, so an app can move between stacks, or mix them, without relearning anything. Tailwind is optional, and nothing depends on DaisyUI.
What's in it
- Design tokens in W3C DTCG format: every color, size, radius, shadow and duration, built to CSS custom properties, TypeScript and PHP.
- Themes (light, dark and high contrast), density (compact, default and comfortable) and presets (named brand looks), all switched with an attribute on any element.
- A plain-CSS component layer in cascade layers, so your own CSS always wins without
!important. A headless build drops the visuals and keeps the markup and behavior. - A behavior engine built on Zag state machines, with adapters for Alpine (Livewire), React and Vue, so every stack handles focus, keyboard and ARIA the same way.
- WCAG 2.2 AA throughout, with right-to-left support built in.
Table of Contents
-
Getting Started
-
Foundations
-
Theming
-
Styling
-
Components
-
Accessibility
-
Behavior Engine
-
Packages
-
Upgrading
Getting help
- Issues: GitHub
- Source: ArtisanPack-UI/design-system
The design system is MIT licensed.