Theming

Reflet UI components are styled with shadcn CSS variables, so they match your existing theme.

How it works

Components use Tailwind classes like bg-card, text-foreground and border-border, which resolve to the CSS variables in your globals.css. Switch your shadcn theme, say from Zinc to Slate, and the components follow.

Tag colors come from --tag-* variables that the shadcn CLI adds to your CSS when you install a component. Edit them there to retune the palette.

CSS variables used

Variable	Used for
`--background`	Page background
`--foreground`	Primary text
`--card`	Card background
`--primary`	Active upvote state and accents
`--secondary`	Track and summary surfaces in milestone views
`--muted`	Subtle backgrounds and progress tracks
`--muted-foreground`	Secondary text and metadata
`--border`	Card borders and dividers
`--destructive`	Active downvote state
`--tag-<color>, --tag-<color>-text`	Tag and status pill colors

Customizing components

Components are installed as source files in your project, so you can edit them directly. Common changes:

Change the corner radius by adjusting the rounded-* classes.
Adjust padding and gaps.
Tune vote animations through the transition props on the motion elements.
Add or remove fields such as tags, author or description.

Dark mode

Dark mode works without extra setup. Every color comes from your theme’s CSS variables, including the --tag-* set, which ships with light and dark values.