[leoisadev1]

Summary

The controls tray under each example didn't look like the rest of the docs: the selected segment was a black block cut into the card, sliders were the browser's default range input, the switch thumb turned black when on, and the ring on the selected colour swatch sat off-centre. This restyles all four in components/preview-controls.tsx so they read like the nav and the Preview/Code tabs.

 Segmented  black selected block      ->  pill track, gray chip that slides to the choice
 Slider     native <input type=range> ->  Radix Slider, thumb and fill glide 150ms between values
 Switch     thumb turns black when on ->  white thumb in both states
 Swatch     white ring, off-centre    ->  concentric ring in the swatch's own colour

Evidence

Before	After

Checked on /docs/backgrounds/aurora with agent-browser in Chrome, at 1440px and 390px, dark and light:

• Before: clicking a segment swapped in a black block; sliders jumped between steps with Chrome's default styling.
  After: the chip lands on the chosen option (0px offset measured in all three groups); thumb centre and fill edge stay within 1px of each other on every frame of the glide; mouse drag, arrow keys, and Tab all change values.
• Focus ring is hidden after a mouse drag and shown after a key press or when tabbing back in.
• A slider with min === max renders disabled instead of NaN positions; scale effects respect reduced motion.
• ultracite check and tsc --noEmit pass.

Not tested: Firefox, and right-to-left layouts for the Radix slider (the site has no RTL pages).

Merge Danger

Door: two-way. Styling and one docs-only component; reverting the commit restores the old controls.

Blast radius: the controls tray on every example page in the docs. The demos only read values through usePreviewValue, which is unchanged.

Fixes DCN-43

Created with Claude Opus 5.5 in Claude Code.

[linear-code]

DCN-43 Restyle the preview controls to match the docs

Problem

The controls tray under each example uses styling that doesn't match the rest of the docs. The selected segment is a black block cut into the card, the sliders are the browser's default range input, and the switch thumb turns black when on.

Goal

The segmented options, sliders, switch, and colour swatches read as part of the same site as the nav and the Preview/Code tabs.

Acceptance criteria

• Segmented options use a rounded pill track with a soft selected chip, like the Preview/Code tabs.
• Sliders use a custom thin track with the filled part in the ink colour and a consistent thumb in Chrome and Firefox.
• The switch keeps a light thumb in both states.
• Keyboard and focus behaviour is unchanged.
• Looks right in dark and light mode, desktop and mobile.

How to verify

Open /docs/backgrounds/aurora, change each control, and compare against the nav and tabs in both themes.

Review in Linear

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
dithercn	Ready	Preview	Oct 16, 2026 7:02pm UTC

[greptile-apps]

Confidence Score: 5/5

[Medium impact] The PR appears safe to merge; no actionable issues were found.

Summary

Restyles the docs preview controls with a sliding selection chip, Radix sliders, white switch thumbs, and centered color-swatch rings.

• Segmented choices use a sliding chip inside a pill-shaped track.
• Color swatches show a centered ring in the swatch's own color.
• Preview sliders get a styled track and thumb that glide together.
• Switches keep a white thumb in both states.

_{Reviews (1) · Last reviewed commit: "Restyle the preview controls to match th..." · Reviewed by Greptile}