Data display

<Table striped fullwidth>
    <thead>
        <tr>
            <th scope="col">Project</th>
            <th scope="col">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>marketing-site</td>
            <td>Ready</td>
        </tr>
        <tr>
            <td>docs</td>
            <td>Building</td>
        </tr>
    </tbody>
</Table>

<Table>
    <Thead>
        <Tr>
            <Th scope="col">Invoice</Th>
            <Th scope="col">Amount</Th>
        </Tr>
    </Thead>
    <Tbody>
        <Tr>
            <Td>INV-014</Td>
            <Td>$49.00</Td>
        </Tr>
    </Tbody>
</Table>

<Table>
    <Tbody>
        <Tr>
            <Td>INV-014</Td>
            <Td>$49.00</Td>
        </Tr>
        <Tr>
            <Td>INV-013</Td>
            <Td>$49.00</Td>
        </Tr>
    </Tbody>
</Table>

<Table>
    <Tbody>
        <Tr>
            <Td>INV-014</Td>
            <Td>$49.00</Td>
        </Tr>
    </Tbody>
    <Tfoot>
        <Tr>
            <Th scope="row">Total</Th>
            <Td>$49.00</Td>
        </Tr>
    </Tfoot>
</Table>

<Table>
    <Tbody>
        <Tr>
            <Td>INV-014</Td>
            <Td>Paid</Td>
        </Tr>
    </Tbody>
</Table>

<Table>
    <Thead>
        <Tr>
            <Th scope="col">
                Status
            </Th>
        </Tr>
    </Thead>
</Table>

<Table>
    <Tbody>
        <Tr>
            <Td>Paid</Td>
        </Tr>
    </Tbody>
</Table>

<DataTable
    label="Deploys"
    rows={[
        { id: "128", branch: "main", duration: 102 },
        { id: "127", branch: "feat/ui-kit", duration: 88 },
        { id: "126", branch: "main", duration: 131 },
    ]}
    columns={[
        { id: "id", header: "Deploy", cell: (r: { id: string }) => `#${r.id}` },
        { id: "branch", header: "Branch", cell: (r: { branch: string }) => r.branch },
        {
            id: "duration",
            header: "Duration",
            cell: (r: { duration: number }) => `${r.duration}s`,
            sortValue: (r: { duration: number }) => r.duration,
        },
    ]}
/>

<DescriptionList
    items={[
        { label: "Region", value: "eu-central-1" },
        { label: "Runtime", value: "Bun 1.3" },
        { label: "Created", value: "Sep 3, 2026" },
    ]}
/>

<PropertyList
    items={[
        { label: "Status", value: "Active" },
        { label: "Owner", value: "Ada Lovelace" },
        { label: "Region", value: "eu-central-1" },
    ]}
/>

<List>
    <ListItem>Install the package</ListItem>
    <ListItem>Import the stylesheet</ListItem>
    <ListItem>Render your first component</ListItem>
</List>

<List ordered>
    <ListItem>Install the package</ListItem>
    <ListItem>Import the stylesheet</ListItem>
</List>

type IconName = | "check" | "x" | "plus" | "minus" | "search" | "user" | "users" | "settings" | "menu" | "home" | "heart" | "star" | "bell" | "mail" | "calendar" | "clock" | "edit" | "trash" | "copy" | "download" | "upload" | "link" | "external" | "info" | "warning" | "error" | "success" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-left" | "arrow-right" | "eye" | "eye-off" | "eye-outline" | "lock" | "unlock" | "filter" | "more" | "close" | "spinner" | "sun" | "moon" | "play" | "pause" | "refresh" | "share" | "image" | "file" | "folder" | "zap" | "phone" | "git" | "code";

<ListGroup>
    <ListGroupItem>Profile</ListGroupItem>
    <ListGroupItem>Security</ListGroupItem>
    <ListGroupItem>Notifications</ListGroupItem>
</ListGroup>

<ListGroup>
    <ListGroupItem>Profile</ListGroupItem>
    <ListGroupItem>Security</ListGroupItem>
</ListGroup>

<Timeline>
    <TimelineItem title="Build started" bullet="play">
        09:41
    </TimelineItem>
    <TimelineItem title="Tests passed" bullet="check">
        09:43
    </TimelineItem>
    <TimelineItem title="Deployed to production" bullet="zap" active>
        09:44
    </TimelineItem>
</Timeline>

<Timeline>
    <TimelineItem title="Deployed to production" bullet="zap" active>
        09:44 by Ada
    </TimelineItem>
</Timeline>

type IconName = | "check" | "x" | "plus" | "minus" | "search" | "user" | "users" | "settings" | "menu" | "home" | "heart" | "star" | "bell" | "mail" | "calendar" | "clock" | "edit" | "trash" | "copy" | "download" | "upload" | "link" | "external" | "info" | "warning" | "error" | "success" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-left" | "arrow-right" | "eye" | "eye-off" | "eye-outline" | "lock" | "unlock" | "filter" | "more" | "close" | "spinner" | "sun" | "moon" | "play" | "pause" | "refresh" | "share" | "image" | "file" | "folder" | "zap" | "phone" | "git" | "code";

function Example() {
    const selected = signal("button.tsx");
    const query = signal("");
    const files: TreeNode[] = [
        {
            id: "apps",
            label: "apps",
            badge: 2,
            children: [
                { id: "web", label: "web", children: [{ id: "client.tsx", label: "client.tsx" }] },
                { id: "admin", label: "admin", disabled: true, badge: "locked" },
            ],
        },
        {
            id: "packages",
            label: "packages",
            children: [
                {
                    id: "ui",
                    label: "ui",
                    children: [
                        { id: "button.tsx", label: "button.tsx" },
                        { id: "tree.tsx", label: "tree.tsx" },
                        { id: "styles.css", label: "styles.css", icon: "code" },
                    ],
                },
            ],
        },
        { id: "readme", label: "README.md", icon: "info" },
    ];
    return (
        <Stack gap="0.5rem" style={{ "max-width": "22rem" }}>
            <SearchInput
                aria-label="Filter files"
                placeholder="Filter files"
                value={query()}
                onChange={query.set}
            />
            <Tree
                label="Workspace"
                icons="auto"
                filter={query()}
                defaultExpanded={["apps", "packages", "ui"]}
                value={selected()}
                onChange={selected.set}
                data={files}
            />
            <Text muted>Open: {selected()}</Text>
        </Stack>
    );
}

type IconName = | "check" | "x" | "plus" | "minus" | "search" | "user" | "users" | "settings" | "menu" | "home" | "heart" | "star" | "bell" | "mail" | "calendar" | "clock" | "edit" | "trash" | "copy" | "download" | "upload" | "link" | "external" | "info" | "warning" | "error" | "success" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-left" | "arrow-right" | "eye" | "eye-off" | "eye-outline" | "lock" | "unlock" | "filter" | "more" | "close" | "spinner" | "sun" | "moon" | "play" | "pause" | "refresh" | "share" | "image" | "file" | "folder" | "zap" | "phone" | "git" | "code";

function Example() {
    const steps = signal([
        { id: "install", label: "Install" },
        { id: "test", label: "Test" },
        { id: "deploy", label: "Deploy" },
    ]);
    return <SortableList items={steps()} onChange={steps.set} />;
}

function Example() {
    type Card = { id: string; title: string; meta: string; column: string };
    const columns = [
        { id: "todo", title: "Todo" },
        { id: "doing", title: "In progress" },
        { id: "done", title: "Done" },
    ];
    const cards = signal<Card[]>([
        { id: "c-1", title: "Audit form labels", meta: "#418", column: "todo" },
        { id: "c-2", title: "Toast pause on hover", meta: "#421", column: "todo" },
        { id: "c-3", title: "Kanban keyboard moves", meta: "#402", column: "doing" },
        { id: "c-4", title: "Dark theme tokens", meta: "#389", column: "done" },
    ]);
    const move = (cardId: string, toColumn: string, index: number) => {
        const card = cards().find((c) => c.id === cardId);
        if (!card) return;
        const rest = cards().filter((c) => c.id !== cardId);
        const target = rest.filter((c) => c.column === toColumn);
        const before = target[index];
        const at = before ? rest.indexOf(before) : rest.length;
        cards.set([...rest.slice(0, at), { ...card, column: toColumn }, ...rest.slice(at)]);
    };
    return (
        <KanbanBoard label="Sprint 14" onMove={move}>
            <For each={columns}>
                {(column) => (
                    <KanbanColumn
                        title={column.title}
                        columnId={column.id}
                        count={cards().filter((c) => c.column === column.id).length}
                    >
                        <For each={cards().filter((c) => c.column === column.id)}>
                            {(card) => (
                                <KanbanCard
                                    cardId={card.id}
                                    title={card.title}
                                    meta={card.meta}
                                    onClick={() => {}}
                                />
                            )}
                        </For>
                    </KanbanColumn>
                )}
            </For>
        </KanbanBoard>
    );
}

<KanbanBoard label="Review board">
    <KanbanColumn title="In review" columnId="review" count={1}>
        <KanbanCard cardId="c-7" title="Dark theme for charts" meta="#412 · Ada" />
    </KanbanColumn>
</KanbanBoard>

<KanbanBoard label="Backlog board">
    <KanbanColumn title="Backlog" columnId="backlog">
        <KanbanCard cardId="c-9" title="Audit form labels" meta="#418 · Grace" />
    </KanbanColumn>
</KanbanBoard>

function Example() {
    const openItem = signal<string | null>("billing");
    return (
        <Accordion
            value={openItem() ?? ""}
            onChange={(id: string | null) => openItem.set(id)}
            items={[
                {
                    id: "billing",
                    title: "How does billing work?",
                    content: "You're billed monthly per seat.",
                },
                {
                    id: "cancel",
                    title: "Can I cancel anytime?",
                    content: "Yes — your plan ends at the period's close.",
                },
                {
                    id: "data",
                    title: "Where is my data stored?",
                    content: "In the EU (Frankfurt) by default.",
                },
            ]}
        />
    );
}

function Example() {
    const open = signal(true);
    return (
        <Stack gap="0.5rem">
            <Button size="sm" variant="outline" aria-expanded={open()} onClick={() => open.set(!open())}>
                {open() ? "Hide details" : "Show details"}
            </Button>
            <Collapse open={open()}>
                <Text>Collapsible content animates its height when toggled.</Text>
            </Collapse>
        </Stack>
    );
}

<Spoiler maxHeight={48} showLabel="Show more" hideLabel="Show less">
    Arachne renders on the server and hydrates on the client without re-running component
    bodies. Signals track exactly which DOM nodes depend on which values, so updates touch only
    what changed. Components share one customization system for classes, styles and slots.
</Spoiler>

<Details summary="Why is my deploy queued?">
    Free plans run one build at a time; later builds wait for the current one.
</Details>

function Example() {
    const query = signal("");
    const deploys = ["marketing-site #128", "docs #127", "marketing-site #126", "api #125"];
    return (
        <Stack gap="0.5rem">
            <FilterBar>
                <SearchInput
                    aria-label="Search deploys"
                    placeholder="Search deploys"
                    value={query()}
                    onChange={query.set}
                />
                <Button variant="outline" onClick={() => query.set("")}>
                    Clear
                </Button>
            </FilterBar>
            <For each={deploys.filter((d) => d.includes(query()))}>{(d) => <Text>{d}</Text>}</For>
        </Stack>
    );
}

function Example() {
    const filters = signal(["Status: failed", "Branch: main", "Author: ada"]);
    return (
        <Group gap="0.5rem">
            <For each={filters()}>
                {(filter) => (
                    <FilterChip
                        label={filter}
                        onRemove={() => filters.set(filters().filter((f) => f !== filter))}
                    />
                )}
            </For>
            <Show when={filters().length < 3}>
                <Button
                    size="sm"
                    variant="ghost"
                    onClick={() => filters.set(["Status: failed", "Branch: main", "Author: ada"])}
                >
                    Reset filters
                </Button>
            </Show>
        </Group>
    );
}

<ResultCount count={1284} label="deploys" />