Link

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 Link — it needs no JavaScript, so the classes below are the whole story.

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

Root class link, with 9 modifiers:

• .link
• .link-accent
• .link-error
• .link-hover
• .link-info
• .link-neutral
• .link-primary
• .link-secondary
• .link-success
• .link-warning

React

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

npm i @wizeworks/silicaui-react

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

Props

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 { Link } from "@wizeworks/silicaui-react";
import { Section, Row } from "../lib/Section";
import { COLORS } from "../lib/data";

export function LinkDemo() {
    return (
        <>
            <Section title="Colors">
                <Row>
                    {COLORS.map((color) => (
                        <Link key={color} href="#" color={color}>
                            {color}
                        </Link>
                    ))}
                </Row>
            </Section>

            <Section title="Hover-only underline">
                <Row>
                    <Link href="#" color="primary" hover>
                        Underlines on hover
                    </Link>
                    <Link href="#" color="brand" hover>
                        Also brand
                    </Link>
                </Row>
            </Section>

            <Section title="Real use · inline in a sentence">
                <p className="max-w-md opacity-80">
                    By continuing you agree to our{" "}
                    <Link href="#" color="primary">
                        Terms of Service
                    </Link>{" "}
                    and{" "}
                    <Link href="#" color="primary" hover>
                        Privacy Policy
                    </Link>
                    .
                </p>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

Link — a styled inline <a>. Static output had no way to author one at all, so every link in a projected page had to be a raw element node. 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("Link", "link", { /* 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 "link link-primary" rather than passing a colour as a prop.

Takes children

yes

Hydrated by

nothing — this one is static markup