List

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

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

Root class list, with 4 modifiers:

• .list
• .list-col-grow
• .list-hover
• .list-row
• .list-title

React

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

npm i @wizeworks/silicaui-react

import { List } 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 { List, ListRow, ListColGrow, ListTitle, Avatar, Button } from "@wizeworks/silicaui-react";
import { Section } from "../lib/Section";

const MEMBERS = [
    { initials: "AL", name: "Ada Lovelace", role: "Owner" },
    { initials: "GH", name: "Grace Hopper", role: "Admin" },
    { initials: "AT", name: "Alan Turing", role: "Member" },
];

export function ListDemo() {
    return (
        <Section title="Real use · team member list">
            <List hover className="max-w-md">
                <ListTitle>Team</ListTitle>
                {MEMBERS.map((m) => (
                    <ListRow key={m.initials}>
                        <Avatar color="primary" size="sm" alt={m.name}>
                            {m.initials}
                        </Avatar>
                        <ListColGrow>
                            <div className="font-medium">{m.name}</div>
                            <div className="text-sm opacity-60">{m.role}</div>
                        </ListColGrow>
                        <Button size="sm" variant="ghost" color="neutral">
                            Manage
                        </Button>
                    </ListRow>
                ))}
            </List>
        </Section>
    );
}

Vanilla — node tree to HTML

List — 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("List", "list", { /* 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 "list list-primary" rather than passing a colour as a prop.

Takes children

yes

Hydrated by

nothing — this one is static markup