Design system
Customization
Use the system's controls first, then scope your own refinements.
Start with the public API
Use component props for semantic tone, appearance, size and state. The API tables list accepted unions directly from the source types. The Button, Card, Badge, Tabs and Alert demos enumerate their public variant maps.
Distinguish className from containerClassName on fields. For Input, className reaches the native control and containerClassName reaches the field wrapper. Select also exposes containerClassName.
Try a change before adopting it
On a guided component page, open Customize preview to change preset, color mode, corners, density, brand color, presentation width or direction. These choices affect the preview only; the surrounding website keeps its own preferences.
The code follows your Provider settings. Copy preview link to share a validated configuration, or Reset preview to restore inherited appearance and restart the example. Presentation width is capped by the available space, and the actual width is shown. Check the contrast of your own brand color in both modes.
Scope a CSS refinement
Keep your overrides close to the application composition and consume semantic tokens. The following is an application container, not a replacement component style.
.workspace-panel {
padding: var(--pimolu-spacing-6, 24px);
border: 1px solid var(--pimolu-border);
border-radius: var(--pimolu-radius-lg);
background: var(--pimolu-surface);
color: var(--pimolu-surface-foreground);
}Compose with Tailwind
Tailwind is an application choice, not a Pimolu dependency. This website maps utility colors to Pimolu semantic variables and omits Preflight so resets do not change the components.
Use utilities for layout and responsive behavior. Keep variant styling in Pimolu, and avoid global button/input/select rules that erase the system's states.
Own state deliberately
Use value/onValueChange or value/onChange according to the component's actual API. Select's styled control reports onValueChange; DatePicker reports onChange with a Date or null. Input supports both native onChange and onValueChange.
For useForm.register, use a native-style onChange control. Connect a styled Select through form.values, form.setValue and an associated FormError. See Form for the supported registration contract.