Using the library

Every section here is a single self-contained `.tsx` file that reads its colours, radii, shadows and fonts from CSS custom properties. There is no runtime, no provider to install and no package to add. You copy two things — a component and a stylesheet — and you are finished.

The three-minute version

1. Open any component, set the theme you want with the theme editor, and press Copy component.
2. Press Copy theme and paste the result at the top of your global stylesheet.
3. Import the component and render it.

That is the whole integration. The section will look exactly as it did in the preview, because the preview is rendering the same source against the same tokens.

Requirements

No Tailwind config changes are required. Every visual value is an arbitrary value pointing at a custom property, for example `bg-[var(--primary)]`, which Tailwind passes straight through.

Installation

Copy the theme into your global stylesheet, above the Tailwind directives:

```css :root { --background: #ffffff; --foreground: #09090b; --primary: #18181b; --primary-foreground: #fafafa; /* …the rest of the token set… */ --radius: 8px; --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif; --font-heading: 'Inter', ui-sans-serif, system-ui, sans-serif; }

.dark { /* the dark values for the same tokens */ }

body { background: var(--background); color: var(--foreground); font-family: var(--font-sans); }

@tailwind base; @tailwind components; @tailwind utilities; ```

Then drop the component file in:

```bash npm i lucide-react

save the copied source as src/components/sections/hero-centered-cta.tsx

```

```tsx import HeroCenteredCta from "@/components/sections/hero-centered-cta";

export default function Page() { return ( <main> <HeroCenteredCta /> </main> ); } ```

The theming contract

The token set

Thirteen colour tokens, one radius, one shadow scale and two fonts. Every section in the library is built from exactly these.

How a section uses them

Layout and spacing are ordinary Tailwind. Only visual values go through tokens:

```tsx

Notice what is absent: no hex codes, no `bg-blue-600`, no `font-sans`, no `font-family: Inter`. That absence is the contract, and it is enforced by a linter rather than left to discipline.

Dark mode

The copied stylesheet defines the light set on `:root` and the dark set on `.dark`. Sections need no `dark:` variants at all — swapping the token values is what changes the appearance. Set `darkMode: "class"` in your Tailwind config and toggle `class="dark"` on `<html>`.

Derived foregrounds

Foreground tokens are computed from the surface they sit on, targeting a WCAG contrast ratio of at least 4.5:1. The theme editor shows the achieved ratio beside each one, and you can unlock any of them to set a value by hand.

Adding your own token

Nothing stops you extending the set. Add the declaration to your `:root`, then reference it from your own sections with `bg-[var(--your-token)]`. Library sections will not use it, but they will not fight it either.

Copying and exporting

Each component page offers four clipboard actions and two exports.

The zip works with no build step

Unzip it and double-click `index.html`. It loads React, Tailwind and any allowed dependencies from a CDN, so the section renders — with its interactivity intact — without installing anything.

When to use "Copy as HTML"

Only when you need markup for somewhere React cannot go: an email builder, a CMS block, a static mockup. Any `useState` behaviour is frozen at its initial state, which is why it is labelled a snapshot rather than an export.

Sharing a theme

The theme editor persists to `localStorage`, so it survives a reload. To send a theme to someone else, use Share in the editor footer — it writes the theme into the URL, either as a preset name or as an encoded token set. Anyone opening that link sees the whole library in your colours.

Export JSON downloads the same token set as a file, which is the format the admin import accepts.

Frequently asked

Do I have to use Tailwind?

For the sections as written, yes — they are Tailwind class lists. The tokens are plain CSS, so you can adopt the theme layer without Tailwind and write your own components against it.

Can I change a section after copying?

It is your file. The only thing worth preserving is the token discipline: if you replace `var(--primary)` with a hex code, that element stops following the theme.

Why iframes for the previews?

Isolation. Library components run with their own React, their own Tailwind build and no access to this app. It also means a component with a bug shows an error overlay instead of taking down the page you are browsing.

Which dependencies are allowed?

`react`, `lucide-react`, `clsx` and `framer-motion`. Anything else is rejected when the component is saved, so a copied section never asks you to install something unexpected.