Getting started

Introduction

CodeAtlas UI is an open-source Svelte 5 component library with a glass material system, 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 bits-ui 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, empty state and glass surface, with no CSS written.

What you get

• Pages, not primitives. AppList, AppForm, AppSettings, PageShell and AppShellLayout bring layout, spacing and empty states.
• Liquid Glass. Five material tiers with real backdrop-filter, tuned for light and dark, with opaque fallbacks for reduced transparency.
• Theme engine. Eight OKLCH presets, brand presets from one hex color, four surface styles, and no flash on load.
• Native on mobile. Safe areas, keyboard handling, 44px touch targets, bottom sheets with swipe to dismiss, and browser chrome color that follows the page.
• Accessible. bits-ui behavior, axe-tested components, reduced motion and reduced transparency support.
• Light. Charts, DataTable and CodeSnippet are separate entry points with optional peers, so they stay out of your bundle unless imported.
• Built for AI agents. Closed prop vocabularies, typed props, llms.txt and installable skills.

Install

bun add @codeatlasdev/ui

npm install @codeatlasdev/ui

pnpm add @codeatlasdev/ui

Start here

Explore