# CodeAtlas UI > Open-source Svelte 5 component library (`@codeatlasdev/ui`): page templates, app shell, data tables, charts, forms and overlays, with a Liquid Glass material system, an OKLCH theme engine and native-feeling mobile behavior. Built on its own headless primitives layer. Install with `bun add @codeatlasdev/ui`. Full documentation in one file: https://ui.codeatlas.com.br/llms-full.txt ## Getting started - [Introduction](https://ui.codeatlas.com.br/docs/): 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. - [Installation](https://ui.codeatlas.com.br/docs/getting-started/installation/): Install @codeatlasdev/ui and wire the theme into SvelteKit, Astro or plain Vite without a flash of the wrong theme. - [Theming](https://ui.codeatlas.com.br/docs/getting-started/theming/): Define a theme with defineTheme, derive a brand preset from one hex color, switch schemes and surface styles, and override tokens through the cascade. - [Mobile](https://ui.codeatlas.com.br/docs/getting-started/mobile/): Safe areas, dynamic viewport height, the on-screen keyboard, the iOS keyboard pattern, browser chrome color and the mobile layout components. - [Accessibility](https://ui.codeatlas.com.br/docs/getting-started/accessibility/): What the components handle for you (focus, keyboard, labels, motion, transparency, contrast) and what stays your responsibility. - [Internationalization](https://ui.codeatlas.com.br/docs/getting-started/i18n/): Every string the components render comes from a catalog. English is the default, Brazilian Portuguese ships built in, and any phrase can be overridden. - [AI agents](https://ui.codeatlas.com.br/docs/getting-started/ai-agents/): Give Claude, Cursor, Codex and other coding agents the context to use CodeAtlas UI correctly, through skills, llms.txt and the agent guide. - [Performance](https://ui.codeatlas.com.br/docs/getting-started/performance/): Ship less CSS with per-preset imports, avoid layout shift with Image and metric-matched fonts, generate AVIF and WebP with enhanced-img, and animate without GSAP. - [SEO](https://ui.codeatlas.com.br/docs/getting-started/seo/): Head tags, structured data, sitemap, robots.txt, llms.txt, Markdown for AI crawlers and social images with the @codeatlasdev/ui/seo entry point. - [PWA](https://ui.codeatlas.com.br/docs/getting-started/pwa/): Make a SvelteKit app installable with a themed web app manifest, iOS home screen tags and a service worker that keeps navigations on the network and falls back to an offline page. - [Migrate from React](https://ui.codeatlas.com.br/docs/getting-started/migrate-react/): Move a React app (MUI, shadcn/Radix or Chakra) to Svelte 5 and CodeAtlas UI. Decision flow, hook-to-rune map, component maps, layout, theme and data table recipes, and how to report gaps. - [Reporting problems](https://ui.codeatlas.com.br/docs/getting-started/reporting/): How an AI agent that hits a library problem writes a documented workaround and opens a sanitized issue, and what it must never include. ## Foundation - [Colors](https://ui.codeatlas.com.br/docs/foundation/colors/): Brand, surface, text, outline and semantic color tokens, all defined in OKLCH and swapped per preset and scheme. - [Typography](https://ui.codeatlas.com.br/docs/foundation/typography/): Font families and the type scale for headings, body text and UI labels. - [Shadows](https://ui.codeatlas.com.br/docs/foundation/shadows/): Elevation scale from xs to xl, tuned separately for light and dark schemes. - [Materials](https://ui.codeatlas.com.br/docs/foundation/materials/): The five material tiers behind every surface, from ultra-thin translucency to chrome, and how the surface style changes them. - [Drag and drop](https://ui.codeatlas.com.br/docs/foundation/drag-and-drop/): Sort a list, move items between lists and drop onto zones with mouse, touch and keyboard, announced to screen readers and calm under reduced motion. ## Surfaces - [Surface](https://ui.codeatlas.com.br/docs/surfaces/surface/): The painted container every card and panel is built on: elevation, material, tone, variant and radius as independent props. - [Card](https://ui.codeatlas.com.br/docs/surfaces/card/): A Surface with a header, padding and an optional link: the default container for content sections. - [Accordion](https://ui.codeatlas.com.br/docs/surfaces/accordion/): Vertically stacked collapsible sections with one or many items open at once. - [Collapsible](https://ui.codeatlas.com.br/docs/surfaces/collapsible/): A single toggle panel, simpler than Accordion when you only need one. - [Glass Card](https://ui.codeatlas.com.br/docs/surfaces/glass-card/): Deprecated: use Card. GlassCard is kept until the next major version. - [Glass Surface](https://ui.codeatlas.com.br/docs/surfaces/glass-surface/): Deprecated: use Surface. GlassSurface is kept until the next major version. - [LiquidGlass](https://ui.codeatlas.com.br/docs/surfaces/liquid-glass/): The SVG refraction layer that Surface paints when material is "liquid". Use it directly only for a custom glass container. ## Inputs - [Export Menu](https://ui.codeatlas.com.br/docs/inputs/export-menu/): An Export button with a CSV and JSON menu that builds and downloads the file in the browser. - [FilterGroup](https://ui.codeatlas.com.br/docs/inputs/filter-group/): Inline filter chips for list toolbars, with an automatic "All" option. - [SettingItem](https://ui.codeatlas.com.br/docs/inputs/setting-item/): A settings row with a label, a description and one control on the right. - [Button](https://ui.codeatlas.com.br/docs/inputs/button/): Trigger actions with five visual variants, three sizes, leading and trailing icons, and a loading state. - [Checkbox](https://ui.codeatlas.com.br/docs/inputs/checkbox/): Binary or indeterminate selection control with full keyboard support. - [Combobox](https://ui.codeatlas.com.br/docs/inputs/combobox/): Select with built-in search for long option lists. - [CopyButton](https://ui.codeatlas.com.br/docs/inputs/copy-button/): Copies a string to the clipboard, swaps the icon to a check for 2 seconds and announces the result to screen readers. - [Date and time](https://ui.codeatlas.com.br/docs/inputs/date-picker/): DatePicker, DateRangePicker, DateField, TimeField, Calendar and RangeCalendar, fully keyboard operable. - [FileUpload](https://ui.codeatlas.com.br/docs/inputs/file-upload/): Drag and drop zone for selecting files, with type and size validation. - [MaskedField](https://ui.codeatlas.com.br/docs/inputs/masked-field/): Text input with live formatting for Brazilian documents, phone numbers, CEP and dates. - [MoneyInput](https://ui.codeatlas.com.br/docs/inputs/money-input/): Currency field. The bound value is an integer in the currency's minor unit and the display is formatted as you type. BRL by default. - [NumberField](https://ui.codeatlas.com.br/docs/inputs/number-field/): Stepper input for numeric values with optional min, max and step. - [PinInput](https://ui.codeatlas.com.br/docs/inputs/pin-input/): One-time code and PIN entry. Paste, backspace and arrow keys work across cells, and SMS codes autofill. - [RadioGroup](https://ui.codeatlas.com.br/docs/inputs/radio/): Single-selection radio group as a list of rows or a grid of selectable cards. - [SegmentedControl](https://ui.codeatlas.com.br/docs/inputs/segmented-control/): Single-choice control with a sliding thumb. It always has a selection and honors prefers-reduced-motion. - [Select](https://ui.codeatlas.com.br/docs/inputs/select/): Dropdown selector with keyboard navigation, a label, hint and error state. - [Slider](https://ui.codeatlas.com.br/docs/inputs/slider/): Range input with a single thumb or two thumbs, plus min, max and step. - [SwatchGroup](https://ui.codeatlas.com.br/docs/inputs/swatch-group/): Single-choice color picker made of round swatches. Preset swatches follow the theme; custom ones take any CSS color. - [Switch](https://ui.codeatlas.com.br/docs/inputs/switch/): Toggle control for binary on/off settings, with `role="switch"`. - [TextArea](https://ui.codeatlas.com.br/docs/inputs/text-area/): Multi-line text input with label, helper text, error state and configurable resize behavior. - [TextField](https://ui.codeatlas.com.br/docs/inputs/text-field/): Styled text input with label, helper text, error state and leading and trailing slots. - [ThemeToggle](https://ui.codeatlas.com.br/docs/inputs/theme-toggle/): Switches between light and dark through the colorScheme store. Built for the AppShell railBottom slot. - [ToggleGroup](https://ui.codeatlas.com.br/docs/inputs/toggle-group/): A set of toggle buttons with single or multiple selection. Single groups use arrow-key navigation. - [useForm](https://ui.codeatlas.com.br/docs/inputs/use-form/): Reactive form state with optional schema validation. Works with Zod, Valibot or a plain validator function. ## Display - [Alert](https://ui.codeatlas.com.br/docs/display/alert/): Inline status messages for success, warning, error and info states, with an optional title and close action. - [Avatar](https://ui.codeatlas.com.br/docs/display/avatar/): User avatar that shows an image and falls back to colored initials, with size, shape and presence status. - [Badge](https://ui.codeatlas.com.br/docs/display/badge/): Small count and status indicators anchored to icons, avatars and buttons. - [Chip](https://ui.codeatlas.com.br/docs/display/chip/): Compact element for tags, filters and status labels, with icons, color variants, selection and deletion. - [CodeSnippet](https://ui.codeatlas.com.br/docs/display/code-snippet/): Syntax-highlighted code block with a copy button, highlighted by Shiki and following the current color scheme. - [Image](https://ui.codeatlas.com.br/docs/display/image/): A responsive image that reserves its space (no layout shift), loads lazily, and preloads the one above-the-fold image. - [DataTable](https://ui.codeatlas.com.br/docs/display/data-table/): Table with search, sorting, pagination, column visibility, row groups, resizable columns, drag-to-reorder rows and interactive cells, built on TanStack Table. - [Divider](https://ui.codeatlas.com.br/docs/display/divider/): Horizontal and vertical separators drawn with outline tokens. - [NotificationBell](https://ui.codeatlas.com.br/docs/display/notification-bell/): Bell button with an unread badge that opens a notification center, designed for app shell headers. - [Kbd](https://ui.codeatlas.com.br/docs/display/kbd/): A keycap for keyboard shortcuts in prose, menus and tooltips. - [Pagination](https://ui.codeatlas.com.br/docs/display/pagination/): Navigation between pages of a data set, with a bindable current page. - [ScrollArea](https://ui.codeatlas.com.br/docs/display/scroll-area/): Scrollable container with overlay scrollbars styled by the theme. - [Table](https://ui.codeatlas.com.br/docs/display/table/): SimpleTable styles plain table markup with a sticky header, hover rows and an optional card layout in narrow containers. - [Timeline](https://ui.codeatlas.com.br/docs/display/timeline/): Chronological list of events with colored markers. - [Live List](https://ui.codeatlas.com.br/docs/display/live-list/): A list that fills while rows stream in over SSE, WebSocket or a bulk job, with progress, batched screen reader announcements and auto-scroll that never steals focus. - [Tooltip](https://ui.codeatlas.com.br/docs/display/tooltip/): Floating label shown on hover and focus, with four placements and a configurable delay. - [External Link](https://ui.codeatlas.com.br/docs/display/external-link/): A link that opens in a new tab with the right rel, an icon and a screen reader hint, ready for table cells. - [Message Bubble](https://ui.codeatlas.com.br/docs/display/message-bubble/): A chat bubble with direction, grouping tails, sender and avatar, reply quote, reactions and delivery ticks. - [Conversation Item](https://ui.codeatlas.com.br/docs/display/conversation-item/): An inbox row with avatar, title, time, preview, unread badge, pinned and muted flags and an active state. - [Audio Player](https://ui.codeatlas.com.br/docs/display/audio-player/): A voice message player with waveform scrubbing, playback rate, lazy loading and slider semantics. - [Media Grid](https://ui.codeatlas.com.br/docs/display/media-grid/): Image, video and document tiles for a chat message that open a Lightbox gallery. - [Virtual List](https://ui.codeatlas.com.br/docs/display/virtual-list/): A windowed list with load-older at the top that keeps the scroll position, for long chat histories. ## Feedback - [Dialog](https://ui.codeatlas.com.br/docs/feedback/dialog/): A second-layer modal. The overlay blurs the page while the panel uses a solid surface. - [AlertDialog](https://ui.codeatlas.com.br/docs/feedback/alert-dialog/): A confirmation dialog that demands an explicit answer, with role alertdialog and async confirm handling. - [Drawer](https://ui.codeatlas.com.br/docs/feedback/drawer/): A side or bottom panel for the second layer, with a blurred overlay and a solid panel. - [Sheet](https://ui.codeatlas.com.br/docs/feedback/sheet/): A mobile-first bottom sheet with swipe to dismiss that becomes a centered dialog from 900px. - [Skeleton](https://ui.codeatlas.com.br/docs/feedback/skeleton/): Loading placeholders that match the shape of the real content. - [Spinner](https://ui.codeatlas.com.br/docs/feedback/spinner/): An inline loading indicator for buttons, sections and overlays. - [Progress](https://ui.codeatlas.com.br/docs/feedback/progress/): A linear progress bar with determinate values, an indeterminate animation and an accessible label. - [Toast](https://ui.codeatlas.com.br/docs/feedback/toast/): A global notification system. Mount Toaster once, then call toast.success(), toast.error() and friends from anywhere. - [Lightbox](https://ui.codeatlas.com.br/docs/feedback/lightbox/): A full-screen viewer for images and videos, single or as a gallery, on a native modal dialog. - [InstallPrompt](https://ui.codeatlas.com.br/docs/feedback/install-prompt/): A dismissible banner that offers to install the app, with the native dialog on Chromium and Share-sheet steps on iOS. ## Navigation - [Command Palette](https://ui.codeatlas.com.br/docs/navigation/command-palette/): A spotlight-style navigation overlay opened with Cmd+K or Ctrl+K from anywhere. - [Dropdown Menu](https://ui.codeatlas.com.br/docs/navigation/menu/): A floating action menu with items, checkbox and radio items, submenus and context-menu anchoring. - [Popover](https://ui.codeatlas.com.br/docs/navigation/popover/): A floating overlay anchored to a trigger, for short content or small forms. - [Tabs](https://ui.codeatlas.com.br/docs/navigation/tabs/): Keyboard-navigable tab panels with roving focus, controlled or uncontrolled. - [Breadcrumb](https://ui.codeatlas.com.br/docs/navigation/breadcrumb/): An accessible navigation trail that is framework-agnostic, so you pass the items directly. - [Stepper](https://ui.codeatlas.com.br/docs/navigation/stepper/): Multi-step wizard navigation with completed, active and pending states. - [GlassAppBar](https://ui.codeatlas.com.br/docs/navigation/app-bar/): A top application bar with glass blur and leading, content and trailing slots. - [Drawer (navigation)](https://ui.codeatlas.com.br/docs/navigation/drawer/): The Drawer used for navigation and settings panels that slide in from the left or right edge. - [Actions](https://ui.codeatlas.com.br/docs/navigation/actions/): Svelte actions from the @codeatlasdev/ui/actions subpath for outside clicks, focus trapping, autofocus, clipboard and long press. - [Loading boundary](https://ui.codeatlas.com.br/docs/navigation/loading-boundary/): A loading UI that never flashes, plus a top progress bar and pending links for SvelteKit navigations. - [App navigation](https://ui.codeatlas.com.br/docs/navigation/app-navigation/): Make SvelteKit navigations feel instant. Preload defaults, where to mount NavigationProgress and RouteAnnouncer, LoadingBoundary for slow data, pendingLink for the tapped link and view transitions. ## Layout - [StickyActions](https://ui.codeatlas.com.br/docs/layout/sticky-actions/): A form action bar pinned to the bottom of a scrolling container, with safe-area and virtual keyboard support. - [SkipLink](https://ui.codeatlas.com.br/docs/layout/skip-link/): A "Skip to content" link that appears on keyboard focus and moves focus to the main landmark. Built into the page shells. - [Layout primitives](https://ui.codeatlas.com.br/docs/layout/layout-primitives/): Box, Flex, Stack, Grid, Container and Section: spacing and alignment as token props, rendered as data attributes with no inline style. - [MobilePane](https://ui.codeatlas.com.br/docs/layout/mobile-pane/): A full-screen pane above the shell for mobile drill-down such as chat threads, history and detail views. - [AppShell](https://ui.codeatlas.com.br/docs/layout/app-shell/): Application layout with a module rail, a navigation panel, a mobile header and a bottom navigation, independent of any router. - [PageShell](https://ui.codeatlas.com.br/docs/layout/page-shell/): The standard page container with a title, a description and an actions slot. - [Page layouts](https://ui.codeatlas.com.br/docs/layout/list-page/): Ready-made page layouts for lists, forms, settings and dashboards, built from AppList, AppForm, AppSettings and PageShell. - [KpiCard](https://ui.codeatlas.com.br/docs/layout/kpi-card/): A metric card with a title, a value, an optional unit, a trend and an icon. - [KpiGrid](https://ui.codeatlas.com.br/docs/layout/kpi-grid/): A responsive row of KpiCards that never leaves an empty cell, whatever the count. - [RecordList](https://ui.codeatlas.com.br/docs/layout/record-list/): Records as dense rows (identity, a few columns, a row menu) that re-flow to a compact two-line row on a phone. - [AppForm](https://ui.codeatlas.com.br/docs/layout/form-page/): A page-level form layout with a fixed header, a scrollable body and a sticky footer. - [EmptyState](https://ui.codeatlas.com.br/docs/layout/empty-state/): A placeholder for empty views with an icon, a title, a description and actions. - [ErrorPage](https://ui.codeatlas.com.br/docs/layout/error-page/): A full-page error state for 404, 403, 500 and 503 with localized copy and home and back actions. - [AuthLayout](https://ui.codeatlas.com.br/docs/layout/auth-layout/): A two-column page for sign in, sign up and password reset, with AuthCard for the form. ## Motion - [Motion](https://ui.codeatlas.com.br/docs/motion/): A vocabulary of named motion: live samples, exact timing, and a way to ask an AI for a motion by name or number. - [Basics](https://ui.codeatlas.com.br/docs/motion/basics/): The smallest motion demos: one effect, one name, exact timing, wrapped in MotionStage. - [MotionStage](https://ui.codeatlas.com.br/docs/motion/motion-stage/): The frame of a motion demo: plays only in view, hands control to the user on touch, always pauses, and renders the final state under reduced motion. - [Hero and ambient](https://ui.codeatlas.com.br/docs/motion/hero-ambient/): Cursor spotlight, grid ripple, gradient field, compare slider, cursor trail, hero intro and card tilt: named, numbered, with exact values. - [Micro-interactions](https://ui.codeatlas.com.br/docs/motion/micro-interactions/): Named micro-interactions with exact values: magnetic button, press spring, morphing toggle, like burst, hold to confirm, copy to check, add to cart fly. - [Text motion](https://ui.codeatlas.com.br/docs/motion/text/): Named text effects with exact timing: split reveal, scramble, odometer, count up, marquee, typewriter, shine sweep and blur in. - [Transitions](https://ui.codeatlas.com.br/docs/motion/transitions/): Shared element, FLIP reorder, spring height, sliding tab indicator, stacked toasts, drag-to-dismiss sheet and filter exits: named, numbered, with exact values. - [Scroll](https://ui.codeatlas.com.br/docs/motion/scroll/): Scroll-linked motion with names and exact values: staggered reveal, view-timeline reveal, parallax, reading progress, horizontal scroll, pinned steps and scroll-driven counters. ## Charts - [Charts overview](https://ui.codeatlas.com.br/docs/charts/): Apache ECharts wrapped by the design system. Pass data only; themes, animation and glass tooltips are automatic. - [LineChart](https://ui.codeatlas.com.br/docs/charts/line/): Temporal trends, multi-series comparisons, gradient area fills and live data. - [BarChart](https://ui.codeatlas.com.br/docs/charts/bar/): Vertical, horizontal, stacked and grouped bars. - [PieChart](https://ui.codeatlas.com.br/docs/charts/pie/): Proportional data as pie, donut or Nightingale rose, with an optional center label. - [ScatterChart](https://ui.codeatlas.com.br/docs/charts/scatter/): Correlation plots, bubble charts and clustered scatter by group. - [RadarChart](https://ui.codeatlas.com.br/docs/charts/radar/): Multi-dimensional profiles from single skill sets to interactive comparisons. - [GaugeChart](https://ui.codeatlas.com.br/docs/charts/gauge/): KPI gauges, progress rings and animated counters. - [HeatmapChart](https://ui.codeatlas.com.br/docs/charts/heatmap/): Density and pattern visualization as calendar grids and hour-by-day matrices. - [Sparkline](https://ui.codeatlas.com.br/docs/charts/sparklines/): Inline micro charts for KPI cards, table rows and live streams. ## Docs kit - [Docs primitives](https://ui.codeatlas.com.br/docs/docs-kit/docs/): Components for developer documentation sites, from the page shell and navigation to code tabs, callouts and prose typography. - [Release lists](https://ui.codeatlas.com.br/docs/docs-kit/release-lists/): The markup contract for changelog and release-notes pages inside .ca-prose, and how the heading anchors and the version index are linked. ## Optional - [Agent guide (AGENTS.md)](https://github.com/codeatlasdev/ui/blob/main/AGENTS.md): critical rules, tokens, page template patterns. - [Source](https://github.com/codeatlasdev/ui): repository, issues and changelog. - [npm](https://www.npmjs.com/package/@codeatlasdev/ui): published package.