Getting started

Introduction

CodeAtlas UI is an open-source Svelte 5 component library with a sober solid default, opt-in glass materials, an OKLCH theme engine and native-feeling mobile behavior.

CodeAtlas UI gives Svelte 5 apps full screens, not just bricks: page templates, an app shell, data tables, charts, forms and overlays, all built on a headless layer of our own and themed through CSS custom properties.

<AppList title="Users" data={users} searchKeys={["name", "email"]}>
  {#snippet children(list)}
    <SimpleTable>
      {#each list.rows as u (u.id)}
        <tr><td><UserCell name={u.name} email={u.email} /></td></tr>
      {/each}
    </SimpleTable>
  {/snippet}
</AppList>

That is a whole users page: header, search, pagination and empty state, with no CSS written.

What you get

• Page templates instead of primitives: AppList, AppForm, AppSettings, PageShell and AppShellLayout bring layout, spacing and empty states.
• Sober by default, glass on request: surfaces are solid and opaque out of the box. The liquid recipe (or defaultStyle: "glass") brings back Liquid Glass, with five material tiers over a real backdrop-filter and opaque fallbacks for reduced transparency.
• A theme engine with eight OKLCH presets, brand presets from one hex color, nine surface styles, fifteen design-style recipes and no flash on load.
• Native feel on mobile: safe areas, keyboard handling, 44px touch targets, bottom sheets with swipe to dismiss and a browser chrome color that follows the page.
• Accessibility: WAI-ARIA keyboard and focus behavior, axe-tested components, reduced motion and reduced transparency support.
• Small bundles: Charts, DataTable and CodeSnippet are separate entry points with optional peers, so they stay out of your bundle unless imported.
• Agent-ready: closed prop vocabularies, typed props, an MCP server, llms.txt and installable skills.

Install

bun add @codeatlasdev/ui

npm install @codeatlasdev/ui

pnpm add @codeatlasdev/ui

Start here

Explore