Layout

<Stack gap="0.5rem">
    <Text>First</Text>
    <Text>Second</Text>
    <Text>Third</Text>
</Stack>

<Group gap="0.5rem">
    <Button variant="ghost" onClick={() => {}}>
        Cancel
    </Button>
    <Button onClick={() => {}}>Save</Button>
</Group>

<Flex justify="space-between" align="center">
    <Text>Invoices</Text>
    <Button size="sm" onClick={() => {}}>
        Export
    </Button>
</Flex>

<Grid cols={3} gap="0.75rem">
    <Box>1</Box>
    <Box>2</Box>
    <Box>3</Box>
    <Box>4</Box>
    <Box>5</Box>
    <Box>6</Box>
</Grid>

<Grid cols={3} gap="0.75rem">
    <GridItem span={2}>
        <Box>Spans two columns</Box>
    </GridItem>
    <Box>One</Box>
</Grid>

<Columns gap="1rem">
    <Column>
        <Box>Auto</Box>
    </Column>
    <Column size={6}>
        <Box>Half</Box>
    </Column>
    <Column>
        <Box>Auto</Box>
    </Column>
</Columns>

<Columns>
    <Column size={4}>
        <Box>One third</Box>
    </Column>
    <Column>
        <Box>Rest</Box>
    </Column>
</Columns>

type ColumnSize = | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "full" | "four-fifths" | "three-quarters" | "two-thirds" | "three-fifths" | "half" | "two-fifths" | "one-third" | "one-quarter" | "one-fifth" | "narrow" | "auto";

<Container size="sm">
    <Box>Content constrained to the small container width.</Box>
</Container>

<Section size="sm">
    <Title order={3}>Pricing</Title>
    <Text>Sections add vertical rhythm between page regions.</Text>
</Section>

<Level>
    <LevelLeft>
        <LevelItem>
            <strong>128 deploys</strong>
        </LevelItem>
    </LevelLeft>
    <LevelRight>
        <LevelItem>
            <Button size="sm" onClick={() => {}}>
                New deploy
            </Button>
        </LevelItem>
    </LevelRight>
</Level>

<Level>
    <LevelLeft>
        <LevelItem>Left side</LevelItem>
    </LevelLeft>
</Level>

<Level>
    <LevelRight>
        <LevelItem>Right side</LevelItem>
    </LevelRight>
</Level>

<Level>
    <LevelItem>
        <Text>Deploys</Text>
    </LevelItem>
    <LevelItem>
        <strong>128</strong>
    </LevelItem>
</Level>

<Media>
    <MediaLeft>
        <Avatar name="Ada Lovelace" />
    </MediaLeft>
    <MediaContent>
        <strong>Ada Lovelace</strong> <Text muted>opened #421</Text>
    </MediaContent>
    <MediaRight>
        <Text muted>2h</Text>
    </MediaRight>
</Media>

<Media>
    <MediaLeft>
        <Avatar name="Grace Hopper" />
    </MediaLeft>
    <MediaContent>Left slot holds the avatar or thumbnail.</MediaContent>
</Media>

<Media>
    <MediaLeft>
        <Avatar name="Grace Hopper" />
    </MediaLeft>
    <MediaContent>The content column grows to fill the row.</MediaContent>
</Media>

<Media>
    <MediaContent>Row content</MediaContent>
    <MediaRight>
        <Button size="sm" variant="ghost" onClick={() => {}}>
            Reply
        </Button>
    </MediaRight>
</Media>

<Center style={{ "min-height": "6rem" }}>
    <Text muted>Centered on both axes</Text>
</Center>

<div>
    <Text>Above</Text>
    <Space h="1.5rem" />
    <Text>Below, 1.5rem later</Text>
</div>

<Stack gap="0.75rem">
    <Text>Account</Text>
    <Divider />
    <Text>Billing</Text>
</Stack>

<AspectRatio style={{ "max-width": "20rem" }} ratio={16 / 9}>
    <img src="/images/16-9.jpg" alt="16 by 9 placeholder" />
</AspectRatio>

<ScrollArea maxHeight="6rem">
    <Stack gap="0.35rem">
        <Text>Deploy #128</Text>
        <Text>Deploy #127</Text>
        <Text>Deploy #126</Text>
        <Text>Deploy #125</Text>
        <Text>Deploy #124</Text>
        <Text>Deploy #123</Text>
    </Stack>
</ScrollArea>

<Splitter
    style={{ height: "8rem" }}
    label="Resize panes"
    initial={40}
    left={<Text>Files</Text>}
    right={<Text>Editor</Text>}
/>

function Example() {
    const notes = [
        { title: "Release 2.4", body: "Dark theme, a component reference and interactive examples." },
        { title: "Standup", body: "Ship the tree search." },
        {
            title: "Design review",
            body: "Tighten the button group borders, fix the burger icon, make quote backgrounds optional and give the tree folder icons.",
        },
        { title: "Bug", body: "PIN input needed two Backspaces." },
        { title: "Idea", body: "Masonry packs cards of different heights into columns without gaps." },
        { title: "Reading", body: "WAI-ARIA tree pattern." },
    ];
    return (
        <Masonry columns={3}>
            <For each={notes}>
                {(note) => (
                    <Paper withBorder padding="md">
                        <strong>{note.title}</strong>
                        <Text muted>{note.body}</Text>
                    </Paper>
                )}
            </For>
        </Masonry>
    );
}

<Reel>
    <img src="/images/1.jpg" alt="Slide 1" width="240" height="160" />
    <img src="/images/2.jpg" alt="Slide 2" width="240" height="160" />
    <img src="/images/3.jpg" alt="Slide 3" width="240" height="160" />
    <img src="/images/4.jpg" alt="Slide 4" width="240" height="160" />
</Reel>

<Bleed x="1rem">
    <Text>Full-width strip that ignores its container's padding.</Text>
</Bleed>

const sections = [
    { id: "overview", label: "Overview" },
    { id: "deploys", label: "Deploys" },
    { id: "settings", label: "Settings" },
];

function Example() {
    const page = signal("deploys");
    return (
        <AppShell
            contentAs="div"
            header={<strong>Acme Console</strong>}
            sidebar={<SidebarNav label="Main" items={sections} value={page()} onChange={page.set} />}
        >
            <Text>{sections.find((s) => s.id === page())?.label} page</Text>
        </AppShell>
    );
}

<PageHeader
    title="Deploys"
    description="Every push to a branch creates a deploy."
    actions={<Button onClick={() => {}}>New deploy</Button>}
/>

<Hero tone="accent" size="sm">
    <HeroBody>
        <Title order={2} size={3}>
            Ship faster with Arachne
        </Title>
        <Text>Signals, SSR and 330+ accessible components.</Text>
    </HeroBody>
</Hero>

type HeroSize = "sm" | "md" | "lg" | "half" | "full";

type HeroTone = "default" | "accent" | "dark" | "light";

<Hero tone="dark" size="sm">
    <HeroHead>
        <strong>Arachne</strong>
    </HeroHead>
    <HeroBody>Hero head sits at the top, for a navbar or brand.</HeroBody>
</Hero>

<Hero size="sm">
    <HeroBody>The body grows to fill the hero and centres its content.</HeroBody>
</Hero>

<Hero tone="light" size="sm">
    <HeroBody>Hero with a footer row.</HeroBody>
    <HeroFoot>
        <Text muted>Trusted by 2,000 teams</Text>
    </HeroFoot>
</Hero>

<Footer>
    <Text muted>© 2026 Acme Inc. · Privacy · Terms</Text>
</Footer>

<SiteFooter
    brand="Arachne"
    columns={[
        {
            title: "Product",
            links: [
                { label: "Pricing", href: "#pricing" },
                { label: "Changelog", href: "#changelog" },
            ],
        },
        {
            title: "Company",
            links: [
                { label: "About", href: "#about" },
                { label: "Careers", href: "#careers" },
            ],
        },
    ]}
    meta="© 2026 Arachne"
/>

<Sticky offset={8}>
    <Paper withBorder>Sticks 8px from the top while its container scrolls.</Paper>
</Sticky>

<StickyBar position="bottom">
    <Text>You have unsaved changes.</Text>
    <Button size="sm" onClick={() => {}}>
        Save
    </Button>
</StickyBar>

<Affix position="bottom-right" offset="1rem">
    <Button size="sm" onClick={() => {}}>
        Feedback
    </Button>
</Affix>