CSS and Styling

Fluid UI is built with Tailwind, shadcn/ui and Radix.

When working with components, you should follow the shadcn/ui convention and CSS variables.

Each component inherits CSS variables from the color scheme of it’s parent section.
You can use the CSS variables as follow:

<div className="bg-primary text-primary-foreground">Hello</div>

/* Default background and foreground colors */
--background
--foreground
/* Muted colors such as <TabsList />, <Skeleton /> and <Switch /> */
--muted
--muted-foreground
/* Card colors */
--card
--card-foreground
/* Popover for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
--popover
--popover-foreground
/* Default border color */
--border
/* Border color for inputs such as <Input />, <Select />, <Textarea /> */
--input
/* Primary colors for <Button /> */
--primary
--Primary-foreground
/* Secondary colors for <Button /> */
--secondary
--secondary-foreground
/* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
--accent
--accent-foreground
/* Used for destructive actions such as <Button variant="destructive"> */
--destructive
--destructive-foreground
/* Used for shadows */
--shadow
/* Used for focus ring */
--ring