Theme

Name: Rad UI
Author: Rad UI Team

A provider component that sets the visual context for all Rad UI components within it — controlling appearance, accent color, radius, and scaling.

Light / Blue

Light / Green

React
"use client"

import Theme from "@radui/ui/Theme"
import Button from "@radui/ui/Button"
import Badge from "@radui/ui/Badge"

const ThemeExample = () => {
    return (
        <div className="flex flex-col gap-6">
            <Theme appearance="light" accentColor="blue">
                <div className="flex items-center gap-3 p-4 rounded-lg border">
                    <Badge color="blue">Light / Blue</Badge>
                    <Button color="blue">Button</Button>
                </div>
            </Theme>
            <Theme appearance="light" accentColor="green">
                <div className="flex items-center gap-3 p-4 rounded-lg border">
                    <Badge color="green">Light / Green</Badge>
                    <Button color="green">Button</Button>
                </div>
            </Theme>
        </div>
    )
}

export default ThemeExample

API Documentation

Anatomy

Import all parts of the component and piece them together

React
import Theme from "@radui/ui/Theme"

export default () => {
    return (
        <Theme appearance="light" accentColor="blue">
            {/* All Rad UI components here inherit the theme */}
        </Theme>
    )
}

Theme

A provider component that sets the visual context for all Rad UI components within it.

Prop	Type	Default
appearance	enum	system
accentColor	string	""
radius	string	""
scaling	string	""
id	string	"rad-ui-theme-container"