shadcn.io is not affiliated with official shadcn/ui
Theme Picker Multi-Action Banner Block for React
A corner-radius picker card for a design-token editor: four chips drawn with their own corners, a greyscale preview that re-rounds as you choose, and Apply and Reset actions.
Installation
Overview
A theme picker banner for React with Base UI, for a setting people want to see before they keep it. A card between the page rails holds four chips, each a tiny card drawn with its own corner (sharp, 6, 10 and 16 px), beside a greyscale preview panel: a field, a button and a chip that re-round as you choose. Apply radius keeps the choice, Reset goes back to 10 px, and a polite status says whether you are previewing or have applied. The radius is a scoped CSS variable on the preview, so the page's own theme never changes, and every colour is a greyscale token that follows your theme. It's built from Segment Group, Shine Button, Button and Guides.
FAQ
How do I make Apply change the real theme?
Apply only stores the choice in the component's state, so the preview stays a demo. To change a real theme, write the value in the apply handler: set --radius on document.documentElement (or call your token API) and save it with the user's settings. The preview keeps using its own --sample-radius variable, so it never depends on the page.
How do I change the radii?
Edit RADII at the top of the file. Each entry has an id, a label, the px value and two class strings: corner (the chip's drawing, such as rounded-[10px]) and sample (the preview's variable, such as [--sample-radius:10px]). The classes are written out in full so Tailwind finds them; build them from a template string and they will not be generated.
How is the picker named for screen readers?
The four chips are one radio group named "Corner radius", so arrow keys move between them and the chosen one is announced. Each chip reads its label and value ("Medium, 10 px"). The drawings and the preview are decoration and are hidden from assistive technology; the status line, which speaks politely, carries what they show.
Why is there no colour picker?
A corner radius is a safe thing to preview: it reads the same in every theme and needs no palette. The block stays greyscale on purpose, so it looks right under any preset, light or dark, and primary stays on the one Shine Button.
Related
- Pro
Reading Preferences Multi-Action Banner
Choices and promptsA reading-preferences prompt for a reading app: three toggles with a live preview that changes size, weight and border, a polite count, and Save, Reset and Not now.
- 12345Pro
Scale Survey Multi-Action Banner
Choices and promptsA one-question survey for a dashboard redesign: a five-point scale of joined cells that answers in place with Thanks, 4 of 5, then an optional one-line comment.
- Pro
A theme pill for a writing app: a three-way toggle group (Light, System, Dark) seeded from the page's theme, with a label that says which one is on.
- Pro
Trial Upgrade Multi-Action Banner
Choices and promptsA trial prompt card for a video editor that sets what you have now beside what stays after the trial, in two columns, with upgrade, compare and remind-me-later actions.
- Pro
Granular Consent Multi-Action Banner
Choices and promptsA consent card for a publisher site: four categories as a 2 by 2 of switch cells on shared hairlines, Essential locked on, with a Shine Button Save choices and an outline Accept all.
- Pro
Card Inset Metric Row CTA
Figures and statsA start-aligned card-in-card CTA for an API platform: a headline, one sentence and two calls to action, with three platform figures in a closing band across the foot of the panel.