@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.

claude code? skills + mcp + the numbered demo catalog in one line:

/plugin install codeatlas-ui --marketplace codeatlasdev/ui

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}