Advanced Radix UI

Install Radix's Switch component and learn what it means to render an unstyled component.

Use Tailwind to target Radix's data attributes to style both the active and inactive states.

Use Tailwind to give our switch a custom design.

Refine our design with some shadows and CSS transitions.

Learn the difference between focus and focus-visible, and an easy way to design focus states with Tailwind's outline utilities.

Add a label to our switch that preserves expected interactions.

Use our switch to update some external React state.

See how Radix lets us render our switch inside a form so the browser can serialize its values for us.

Install Radix's Radio Group component and add it to an existing UI.

Give the items an outlined visual treatment when they're focused with the keyboard.

Update the label of each option based on the selected option's price using React state.

Use the browser's native NumberFormat API to format the price as currency.

Ensure the selected value is submitted alongside a form using the name prop.

Install and style a standalone slider component from scratch.

Expose a name prop that allows our component to be used in a form.

Use Tailwind and Heroicons to give our slider a completely custom look.

Smoothly expand and scale the slider when hovered with a pointer.

Use touch-action and user-select to prevent unwanted behavior.

Learn how to work with Tailwind's group-has-* modifier.

Use React State to avoid the browser's treatment of programmatic focus.

Intercept Radix's default behavior by turning our slider into a controlled component.

Use event data to derive the change in pointer location during a drag.

Scale the pointer's raw movement data into our slider's value range.

Use the slider's width and max/min props to make our interaction fully dynamic.

Update our custom interaction to respect the min/max/step props.

Use onValueCommit to bring back Radix's default keyboard behaviors.

Allow callers to use our finished custom slider to update their own React state.

Install and style a toast message that dismisses automatically.

Add and style a pre-wired component to dismiss a toast on click.

Conditionally render a toast message using React state.

Set the toast's description from the button's click handler.

Use an array to render a new message each time the button is pressed.

Learn how to compose Framer Motion with Radix using the asChild prop.

Use the forceMount prop to delegate unmounting to React and Framer Motion.

Style the toast messages and viewport when focused with the keyboard.