Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path is complete for Hero — it needs no JavaScript, so the classes below are the whole story.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class hero, with 2 modifiers:

• .hero
• .hero-content
• .hero-overlay

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { Hero } from "@wizeworks/silicaui-react";

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

import { Hero, HeroContent, HeroOverlay, Button } from "@wizeworks/silicaui-react";
import { Section } from "../lib/Section";

export function HeroDemo() {
    return (
        <Section title="Real use · landing banner">
            <Hero
                className="rounded-box"
                style={{
                    backgroundImage:
                        "linear-gradient(135deg, #6366f1, #ec4899)",
                }}
            >
                <HeroOverlay />
                <HeroContent className="text-center text-white">
                    <div className="max-w-md">
                        <h1 className="text-4xl font-bold">Ship faster with Silica</h1>
                        <p className="py-4 opacity-90">
                            One token system, every component, zero lock-in.
                        </p>
                        <Button color="primary">Get started</Button>
                    </div>
                </HeroContent>
            </Hero>
        </Section>
    );
}

Vanilla — node tree to HTML

Hero — lowers to <div>, holding its children. Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("Hero", "hero", { /* props */ }, [/* children */]);
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "hero hero-primary" rather than passing a colour as a prop.

Takes children

yes

Hydrated by

nothing — this one is static markup