Card Selectors
Visual card-based selector system with 5 patterns — feature plan picker, icon feature grid, color swatch selector, layout mode cards with live previews, and media type selector with counts. Selection is communicated through borders, background tints, and check indicators.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| theme | "dark" | "light" | "dark" | Color theme — dark for dashboards, light for marketing or settings pages. |
| accentColor | string | "#f59e0b" | Accent color for active card borders, backgrounds, check indicators, and icon tints. |
When to Use
Ideal for onboarding flows, pricing pages, settings configuration, media library filters, and any selection pattern where the option needs visual context beyond a label.
Best Practices
Limit Plan Picker to 3-4 options to keep the list scannable. Use Color Swatches with a visual preview when possible. Layout Mode cards benefit from actual content mock previews.
Why This Component Matters
Card selectors communicate option value visually — users understand the difference between options before clicking. This reduces second-guessing and improves decision confidence.
FAQ
QHow does the Layout Mode preview work?
Each card contains a mini mock of the layout using colored div blocks — fully CSS, no images needed.
QCan I add more swatches to the Color Selector?
Yes — add to the swatches array with a label and CSS color string. The component automatically adapts.
QIs the Plan Picker accessible?
Yes — each option is a button with visible selected state via border, background, and check icon. Add aria-pressed for full accessibility.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.