Theming

Every block uses semantic shadcn tokens only — never a hard-coded color. That means the blocks inherit your brand automatically the moment you drop them in.

Tokens, not colors

Blocks reference bg-background, text-muted-foreground, border-border and the rest of the shadcn scale. Change the CSS variables behind those tokens once and every block updates — light and dark included.

globals.css

:root {
  --primary: oklch(0.55 0.22 265);   /* your brand */
  --radius: 0.75rem;                 /* rounder corners everywhere */
}

Because nothing is hard-coded, there's no per-block find-and-replace. Retheme the whole catalog from your token file. For the light/dark mechanics, see Dark mode.

Fonts

Blocks don't ship a font — they inherit whatever your project uses. That's on purpose: a block should match your site, not impose ours. So a block will look right, just in your typeface, not necessarily the one you saw on blockforge.

Want the exact look of the site? It uses Geist via next/font. Add it to your root layout:

app/layout.tsx

import { Geist, Geist_Mono } from "next/font/google";

const geistSans = Geist({ variable: "--font-sans", subsets: ["latin"] });
const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"] });

// then on <body>:
// className={`${geistSans.variable} ${geistMono.variable}`}

Not using Geist? Nothing to do — blocks simply follow your project's default font, which is the intended behaviour.

How light and dark work.Dark mode