Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Theme Picker Multi-Action Banner Block for Ark UI

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A theme picker banner for React with Ark 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.

What moves, and what happens with reduced motion?

The card fades up once on load and the preview's corners ease to the new radius in 200 ms, both with CSS. With reduced motion on, neither animates; the corners change at once.

How does it fit on a phone?

The four chips stay in one row and the preview drops under them at full width; the buttons and the status stack in the footer. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the card mirrors.

All 100 banner blocks