Theming

Your pages look like your website. No setup. <FloconPage /> follows your shadcn theme. Nothing to import.

The default CSS is inside the component. It is plain CSS, scoped under .flocon-page. It does not need Tailwind.

How it works

Each --flocon-* variable takes your shadcn variable first. If it does not exist, it uses a Flocon value.

.flocon-page {
--flocon-primary: var(--primary, #2f5bd8);
}

The page rules use only --flocon-* variables.

The variables

• --flocon-primary: from --primary. Used for links.
• --flocon-background: from --background.
• --flocon-foreground: from --foreground. Text color.
• --flocon-card: from --card. FAQ items.
• --flocon-muted: from --muted. Code and table headers.
• --flocon-muted-foreground: from --muted-foreground. Description and secondary text.
• --flocon-border: from --border.
• --flocon-radius: from --radius.
• --flocon-font: from --font-sans.

Dark mode

Nothing to do. shadcn swaps its variables under .dark, and the page follows.

Override the CSS

Set a --flocon-* variable on .flocon-page:

.flocon-page {
--flocon-primary: #e11d48;
--flocon-radius: 4px;
}

All the default CSS is in @layer flocon. Any CSS of yours that is not in a layer wins over it. So you can also restyle an element:

.flocon-page h1 {
font-size: 3rem;
}

Updated October 31, 2026