CodeAtlas UIsketchbook

Describe a screen and hope.Point your AI at page #012.

A Svelte 5 library of 313 numbered, finished screens. Copy one prompt: your AI picks the right ones and builds your app with them.

or browse the gallery
Use CodeAtlas UI (@codeatlasdev/ui, Svelte 5) for all UI in this project.

1. Connect to the library. Add the MCP server: npx -y -p @codeatlasdev/ui ca-ui-mcp
   (Claude Code: /plugin install codeatlas-ui --marketplace codeatlasdev/ui). Then run: npx skills add codeatlasdev/ui

2. Look at what I have:
   - No project yet: run bunx @codeatlasdev/ui init --write in a new SvelteKit or Astro app.
   - Svelte app already here: run bunx @codeatlasdev/ui init --write in place.
   - React app: call get_guide with "migrate-react" and follow it.

3. Build from references. Call search_demos to find a numbered demo, then get_demo to read it. Keep its components, props and motion; change only data, copy and theme. Use get_component before using any prop you are not sure about.

4. If the library blocks you: write a workaround in my code marked "// ca-ui-workaround(#<issue>): <why>", then call report_issue with a minimal repro. Use neutral names only: no project, company, file paths, URLs, secrets or data.

5. Show me one real screen at desktop and phone width when done.

Pick pages, not pixels.

Every demo in the docs has a number. Filter the gallery, tick the pages you want, and copy one message: "I picked these 3 from the @codeatlasdev/ui gallery: #012 …". A link with ?pick=012,045 is the same selection.

The gallery 313 numbered demos, live.One page as text: #012 License line, spec, components and source.The whole index as JSON Every id, title, tag and component.

Your AI gets the same page.

search_demos finds a page by words; get_demo returns its license line, spec, components and source. The skill tells the agent to keep the reference's components, props and motion, and to change only data, copy and theme.

The prompt at the top of this page is the whole setup. It is also served as plain text at/prompt.txt, so you can just tell your AI to follow that URL.

Use @codeatlasdev/ui demo #001 "Full width" (inputs/button).
What it shows: Two buttons that stretch to the width of their container: a filled primary and an outlined cancel. When to use: Stacked action pairs in forms, dialogs and bottom sheets where the buttons should span the column.
Spec:
- `fullWidth` on `Button` makes it fill its parent
- Primary action keeps the default variant, secondary uses `variant="outlined"`
- Wrapper column is `max-width: 320px` with `gap: var(--ca-space-2)`
Check first: Svelte 5 + @codeatlasdev/ui installed? theme in src/lib/theme.ts? Kit 2 or 3?
Apply: import only from "@codeatlasdev/ui[/charts|/table|/code|/forms]"; keep component names, props and
  variants of the reference as they are; no layout CSS, --ca-* tokens only (SKILL.md rules);
  replace sample data/copy with the project's; keep the first comment line.
Report: #001 Full width → file, what changed, https://ui.codeatlas.com.br/docs/inputs/button#full-width; what you could not check (light/dark, 375px, keyboard, reduced motion).
Reference: https://ui.codeatlas.com.br/api/v1/en/e/001.txt   Components API: ca-ui-mcp get_component(Button)
  • MCP servernpx -y -p @codeatlasdev/ui ca-ui-mcp: search_demos, get_demo, get_component, search_tokens, get_guide.
  • Claude Code plugin/plugin install codeatlas-ui --marketplace codeatlasdev/ui: skills + MCP in one line.
  • Skillsnpx skills add codeatlasdev/ui
  • llms.txtA plain-text index of the whole library for any AI to read.

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.

Storage

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: [],
};
Northwind
All systems normal

Revenue

41.2 k
↑+12.4%

Active teams

1,284
↑+4.1%

Weekly growth

Release

v2 rollout Beta Staging

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

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.

Three steps, then your AI does the rest.

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

  1. Install the package 
    bun add @codeatlasdev/ui
  2. 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());
  3. 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.

Hand them the sketchbook.

Open the sketchbook Install the plugin npm