127 Components
Color Finish Picker
InputsApple-style device finish selector featuring concentric selection rings, synchronized ambient page background tinting, crossfading vector hardware graphics, and technical metallurgy specifications.
Finish & Material Studio
Apple Titanium Finishes
Select a metallic finish to crossfade precision aerospace graphics and synchronized ambient lighting
Titanium Alloy Finish
Natural Titanium
Raw aerospace metallurgy with warm industrial character
Material MetallurgyGrade 5 (Ti-6Al-4V)
Surface TreatmentSub-micron PVD satin etch
Optical Sheen14% Diffuse Metallic
Chroma ProfileWarm Pewter Neutral
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/color-finish-picker.json"
Props
TypeScript props supported by <ColorFinishPicker />.
| Prop | Type | Default | Description |
|---|---|---|---|
| finishes | ColorFinish[] | — | Array of finish definitions including hex colors, ambient rgba, and metallurgy specs. |
| defaultFinishId | string | "natural-titanium" | Identifier of the finish selected by default on mount. |
| onChange | (finish: ColorFinish) => void | — | Callback invoked whenever user selects a new color finish. |
| className | string | — | Additional Tailwind CSS classes applied to the root container. |
| showHeader | boolean | — | Whether to display the header title and titanium finish spec label |
Key Features
- Concentric selection rings with smooth Apple-style scale and offset animations.
- Dynamic ambient page background tinting synchronized with selected finish hex.
- Smooth crossfading vector hardware preview across multiple view angles (rear, profile, camera).
- Comprehensive technical metallurgy specs panel with alloy, coating, and optical reflectance metrics.
- Fully keyboard accessible with ARIA selection attributes.
Keyboard & Accessibility
- Each color swatch acts as an accessible radio/button element with descriptive `aria-label`.
- Keyboard focus indicators preserve high contrast regardless of dark/light theme.
- Respects reduced motion preferences for smooth crossfade transitions.