Describing a UI to an AI.Screens it builds right the first time.

CodeAtlas UI gives your Svelte app finished screens: dashboards, lists, forms and a phone layout that feels native. Pick one brand color and the whole app follows. Names are plain, so people and AI assistants both get it right.

Read the docs See it on GitHub

Northwind

All systems normal

Revenue

41.2 k

↑+12.4%

Active teams

1,284

↑+4.1%

Weekly growth

v2 rollout Beta Staging

Auto deploy

Dark

This is a real, working screen, not a picture. Try the buttons, then change its colors below.

One color in, a whole look out.

Choose a brand color and every button, chart and card follows. Eight ready-made palettes come built in. Light and dark modes switch with no flash, and any part of a page can have its own look.

The same settings always give the same result, so design stays predictable.
Switch between solid, flat, frosted and glass surfaces without touching a component.
Make any section dark while the rest of the page stays light.

Brand color

Dark

Plan usage resets in 9 days.

Team Annual

// src/theme.ts
import type { ThemeOptions } from "@codeatlasdev/ui/astro";

export const theme: ThemeOptions = {
  defaultPreset: "ocean",
  defaultScheme: "dark",
  defaultStyle: "glass",
  presets: [],
};

Feels like an app on a phone.

Notches, the on-screen keyboard and finger-sized buttons are handled for you. This phone is real: tap the tabs, open the bell for a sheet you can swipe away, open a thread for a full-screen view.

Bottom tabs, swipe-away sheets, full-screen views and sticky action bars.
The layout adapts when the keyboard opens instead of jumping.
Form fields never trigger the iPhone zoom.

Open the mobile demo in its own page

AI assistants get it right on the first try.

Component names say what a screen is, and props are just your data. There are no styling choices left for an assistant to guess.

Let your AI assistant set it up Copy this message into Claude Code, Cursor or Codex. It installs the library, sets up the theme and remembers your project rules.

Set up CodeAtlas UI (@codeatlasdev/ui, Svelte 5) in this project and make it the default way we build UI.

1. Learn the library first. Read https://ui.codeatlas.com.br/llms.txt and open the pages you need from it (installation, theming, mobile, accessibility). The full docs are at https://ui.codeatlas.com.br/llms-full.txt. Prefer an existing component or page template over writing UI by hand.

2. Install the agent skills: npx skills add codeatlasdev/ui (codeatlas-ui, codeatlas-dx, codeatlas-writing). Use them whenever you touch UI, structure new code or write user-facing text.

3. Install the package with this project's package manager: bun add @codeatlasdev/ui. Add echarts, @tanstack/svelte-table or shiki only when we use charts, data tables or code blocks.

4. Wire the theme, with one shared theme object in src/lib/theme.ts (ThemeOptions: presets from our brand hex, defaultPreset, defaultScheme).
   - SvelteKit: caThemePlugin(theme) and caErrorPlugin({ scaffold: true }) in vite.config.ts (from @codeatlasdev/ui/vite), caThemeHandle(theme) in src/hooks.server.ts and createErrorHandler() as handleError (from @codeatlasdev/ui/kit).
   - Astro: caUI(theme) from @codeatlasdev/ui/astro next to @astrojs/svelte.
   - Root layout: import "@codeatlasdev/ui/styles/global.css" once and call colorScheme.init() on mount. If the app is not in English, wrap the layout in <I18nProvider locale={...}> (SSR-safe; setLocale is a no-op on the server) and register extra languages with registerLocale("es", {...}).
   - Viewport meta: width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content.

5. Save these rules in your persistent memory for this project (AGENTS.md or CLAUDE.md, whichever this repo uses), so every future session follows them:
   - UI: compose package components and page templates first. Colors, spacing, radius and type come only from --ca-* tokens: no hardcoded colors, no Tailwind, no !important. Never put transform or will-change on a glass element or its ancestors.
   - Mobile: test every screen at 390px. Text fields stay at 16px or more, touch targets at 44px, use the safe-area tokens, MobilePane / StickyActions / BottomNav for mobile layouts, and primeKeyboard() (from @codeatlasdev/ui/actions) in the tap that opens a view with a focused field.
   - Test first: write the failing test before the fix or feature (Vitest browser tests for components, with an axe check in every state; Playwright for flows). A bug is done when its regression test passed red and then green.
   - QA before saying done: run the type check, lint and tests, then open the changed screen at desktop and phone width, in light and dark, with the keyboard only, and with no console errors.
   - DX: small typed components, props as data, user-facing text through the i18n catalog, and docs or an example updated with every public change.

6. Prove it works: build, start the dev server, and show me one real screen built with the library (for example an AppList or a dashboard with PageShell and KpiCard) at desktop and phone width. Report what you changed, file by file.

Or just tell it: follow https://ui.codeatlas.com.br/prompt.txt

<AppList title="Users" data={users} searchKeys={['name', 'email']} perPage={8}>
  {#snippet actions()}
    <Button variant="filled" href="/users/new">New user</Button>
  {/snippet}

  {#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>

Typed propsEvery component describes what it accepts, so editors and AI assistants know the rules.
llms.txtA plain-text index of the whole library for any AI to read.
AGENTS.mdA rules file with layouts, colors and the mistakes to avoid.
Ready-made skillsTeach your assistant the library with npx skills add codeatlasdev/ui.

Charts and tables that already match.

Hand over your data and get a chart that fits your colors. When the theme changes, the charts change with it. Charts and tables are optional add-ons, so apps that skip them stay small.

Order	Customer	Plan	Amount	Status
ORD-1042	Lumen Labs	Team	$480	Paid
ORD-1043	Fjord Studio	Solo	$96	Paid
ORD-1044	Kiln & Co	Business	$1,920	Pending
ORD-1045	Tern Systems	Team	$480	Paid
ORD-1046	Basalt	Solo	$96	Refunded
ORD-1047	Marlow Health	Business	$1,920	Paid
ORD-1048	Ostrava IO	Team	$480	Pending

Rows

Works for everyone.

Keyboard, screen readers and high-contrast modes are built in, following the WAI-ARIA patterns. Every component is tested in a real browser, and this page is built with the same components.

Accessibility checks: 80 component test suites
Looks the same everywhere: 77 screenshot test suites
Ready-made palettes: 8, plus your own from one color
Optional add-ons: Charts, tables and code blocks load only if you use them

Up and running in three steps.

Works with SvelteKit and Astro. Install it, add the theme, and start from a ready-made layout.

Install the package

bun add @codeatlasdev/ui

npm install @codeatlasdev/ui

pnpm add @codeatlasdev/ui

Wire the theme into your framework

// vite.config.ts
import { sveltekit } from "@sveltejs/kit/vite";
import { caThemePlugin } from "@codeatlasdev/ui/vite";
import { defineConfig } from "vite";

export default defineConfig({ plugins: [sveltekit(), caThemePlugin()] });

// src/hooks.server.ts
import { sequence } from "@sveltejs/kit/hooks";
import { caThemeHandle } from "@codeatlasdev/ui/kit";

export const handle = sequence(caThemeHandle());

// astro.config.mjs
import svelte from "@astrojs/svelte";
import { caUI } from "@codeatlasdev/ui/astro";
import { defineConfig } from "astro/config";

export default defineConfig({
  integrations: [svelte(), caUI({ defaultPreset: "ocean" })],
});

Import the stylesheet and start the theme store
In your root layout: import "@codeatlasdev/ui/styles/global.css" and call colorScheme.init() once on mount. That is the whole setup.

Build the screen. Skip the styling.

Read the docs See it on GitHub npm