@codeatlasdev/ui
ship the whole screen, not the button.
svelte 5 · one theme object · your agent already knows it
live demo · docs · theme editor · changelog
bunx @codeatlasdev/ui init --write
that's the setup. theme, dark mode, error pages, no white flash. sveltekit or astro.
a whole page in 12 lines
<AppList title="Users" data={users} searchKeys={['name', 'email']}>
{#snippet children(list)}
<SimpleTable responsive="cards">
<thead><tr><th>User</th><th>Role</th></tr></thead>
<tbody>
{#each list.rows as u (u.id)}
<tr><td><UserCell name={u.name} email={u.email} /></td><td>{u.role}</td></tr>
{/each}
</tbody>
</SimpleTable>
{/snippet}
</AppList>
search ✓ pagination ✓ empty state ✓ cards on mobile ✓ css you wrote: 0
your brand in one hex
export const theme = defineTheme({
presets: [{ id: 'acme', color: '#2563eb' }],
defaultPreset: 'acme',
});
every token derives from it, light and dark, on the first frame.
want a vibe? designStyle('swiss'), 'brutalism', 'sketchbook', 'liquid' (the glass one)… same components, new language.
why it hits different
| 🧱 pages, not bricks | AppList AppForm AppSettings AppShellLayout AuthLayout DocsShell |
| 🎨 tokens all the way down | no raw px in components, a lint fails the build if one sneaks in |
| 🪟 style is a theme knob | defaultStyle picks solid (default), flat, outlined, tonal, clay, frosted, glass…; <Surface material="auto"> follows it |
| 🧭 real layers | native <dialog> + popover top layer, no z-index wars |
| ♿ boring stuff, guaranteed | aa/aaa contrast, 44px touch targets, no sideways scroll. tested |
| 🤖 agent-native | skills, llms.txt and an MCP server (ca-ui-mcp) generated from the code |
what's inside
layout Box Flex Stack Grid Container Section Surface Card
shells AppShellLayout PageShell MobilePane StickyActions DocsShell
inputs Button TextField Select Combobox DatePicker PinInput MoneyInput …
overlays Dialog AlertDialog Sheet Drawer Popover Tooltip CommandPalette
data DataTable SimpleTable KpiGrid LiveList + 8 charts (/charts)
seo Seo, json-ld, sitemap, generated favicons + og images (/seo, /vite)
heavy stuff is opt-in: /charts needs echarts, /table needs @tanstack/svelte-table, /code needs shiki.
hack on it
git clone https://github.com/codeatlasdev/ui && cd ui
bun install && bun dev # lib watcher + docs site, one command
contributing · code of conduct · security · MIT
thanks to our main supporters Fábio Henrique Araújo (@FabioHAraujo) and Richardson Douglas (@Richards0nd) 💛
made by codeatlas