Skip to main content

Theming

Theming plays a vital role in the development of applications, offering a powerful mechanism to enhance user experience and visual appeal. This documentation explores the significance of theming, guiding you through the process of implementing and customizing themes to elevate the overall aesthetics and usability of your application.

Theme Tokens​

Customize your color token for light and dark mode theme. Click on the color box, choose your color and then copy & paste it to your global.css file.

--background
255 255 255
Define background color for body, drawer, modal, dropdown, popover. And set ring-offset-color.
--foreground
72 72 72
The global text color.
--muted
227 227 227
Use for border, default flat background color, tab, and dropdown hover color.
--muted-foreground
146 146 146
The disable text color
--primary-lighter
227 227 227
Use for the primary flat variant background color for buttons and badges.
--primary-default
34 34 34
Use for the primary background color for avatar, buttons, badges, inputs hover & focus, Tab active color
--primary-dark
0 0 0
Use for the primary buttons hover & focus color
--primary-foreground
255 255 255
Use for the primary avatar, button & badge text color
--secondary-lighter
221 227 255
Use for the secondary flat variant background color for buttons and badges.
--secondary-default
78 54 245
Use for the secondary solid variant background color for avatar, buttons and badges.
--secondary-dark
67 42 216
Use for the secondary buttons hover & focus color
--secondary-foreground
255 255 255
Use for the secondary avatar, button & badge text color
--red-lighter
247 212 214
Use for the danger flat variant background color for alert, buttons and badges.
--red-default
0 14 0
Use for the danger solid variant background & outline border color for alert, avatar, buttons and badges.
--red-dark
197 0 0
Use for the danger buttons hover, flat badge text color
--orange-lighter
255 239 207
Use for the warning flat variant background color for alert and badges.
--orange-default
245 166 35
Use for the warning solid variant background & outline border color for alert, avatar and badges.
--orange-dark
171 87 10
Use for the flat badge text color
--blue-lighter
211 229 255
Use for the info flat variant background color for alert and badges.
--blue-default
0 112 243
Use for the info solid variant color for alert, avatar, loader, progressbar, tooltip, step and badges.
--blue-dark
7 97 209
Use for the badge & progress bar text color
--green-lighter
185 249 207
Use for success flat color for alert & badges
--green-default
17 168 73
Use for the success solid variant color for alert, avatar, loader, progressbar, tooltip, step and badges.
--green-dark
17 132 60
Use for the badge & progress bar text color

Variant prop​

import { Button } from "rizzui";

export default function App() {
  return (
    <>
      <Button variant="text">Button</Button>
      <Button variant="outline">Button</Button>
      <Button variant="flat">Button</Button>
      <Button>Button</Button>
    </>
  );
}

Color prop​

BadgeBadgeBadgeBadgeBadgeBadge
BadgeBadgeBadgeBadgeBadgeBadge
BadgeBadgeBadgeBadgeBadgeBadge
import { Button } from "rizzui";

export default function App() {
  return (
    <>
      <Badge>Badge</Badge>
      <Badge color="secondary">Badge</Badge>
      <Badge color="info">Badge</Badge>
      <Badge color="warning">Badge</Badge>
      <Badge color="danger">Badge</Badge>
      <Badge color="success">Badge</Badge>
      ... {/* flat & outline variant */}
    </>
  );
}

Rounded prop​

Checkout tailwind borderRadius doc for customization.

import { ActionIcon } from "rizzui";
import {
  BellIcon,
  BoltIcon,
  HeartIcon,
  HandThumbUpIcon,
  ChatBubbleOvalLeftIcon,
} from "@heroicons/react/24/outline";

export default function App() {
  return (
    <>
      <ActionIcon rounded="none">
        <BoltIcon className="w-5 h-5" />
      </ActionIcon>
      <ActionIcon rounded="sm">
        <HandThumbUpIcon className="w-5 h-5" />
      </ActionIcon>
      <ActionIcon>
        <BoltIcon className="w-5 h-5" />
      </ActionIcon>
      <ActionIcon rounded="lg">
        <BoltIcon className="w-5 h-5" />
      </ActionIcon>
      <ActionIcon rounded="full">
        <BoltIcon className="w-5 h-5" />
      </ActionIcon>
    </>
  );
}