# 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 bits-ui. 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 glass material system, 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.

## 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/): Liquid Glass material tiers from ultra-thin translucency to opaque chrome, plus tint, glow and button variants.

## Surfaces

- [Accordion](https://ui.codeatlas.com.br/docs/surfaces/accordion/): Vertically stacked collapsible sections backed by Bits UI, with one or many items open at once.
- [Card](https://ui.codeatlas.com.br/docs/surfaces/card/): GlassCard content patterns: text card, stat cards, accent treatments and a built-in header.
- [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/): A card built on GlassSurface with rounded corners and overflow clipping, the default container for content sections.
- [Glass Surface](https://ui.codeatlas.com.br/docs/surfaces/glass-surface/): The foundational glass material component with configurable thickness, tint, glow and optional refraction.

## Inputs

- [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 built on Bits UI with full keyboard support.
- [Combobox](https://ui.codeatlas.com.br/docs/inputs/combobox/): Select with built-in search, built 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/): BRL currency field. The bound value is integer cents and the display is formatted as you type.
- [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 built on Bits UI with roving focus and arrow-key navigation.
- [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 built on Bits UI with keyboard navigation and a glass content panel.
- [Slider](https://ui.codeatlas.com.br/docs/inputs/slider/): Range input built on Bits UI with a single thumb or two thumbs, plus min, max and step.
- [Switch](https://ui.codeatlas.com.br/docs/inputs/switch/): Toggle control for binary on/off settings, built on Bits UI.
- [TextArea](https://ui.codeatlas.com.br/docs/inputs/text-area/): Multi-line text input with label, glass styling 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, roving focus and 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 backed by Bits UI 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 global search, column sorting, pagination and a column visibility toggle, 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.
- [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, backed by Bits UI.
- [Table](https://ui.codeatlas.com.br/docs/display/table/): SimpleTable adds a sticky header, hover rows and an optional card layout on small screens.
- [Timeline](https://ui.codeatlas.com.br/docs/display/timeline/): Chronological list of events with colored markers.
- [Tooltip](https://ui.codeatlas.com.br/docs/display/tooltip/): Floating label shown on hover and focus, backed by Bits UI, with four placements and a configurable delay.

## 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 768px.
- [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.

## 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 built on Bits UI with items, labels and separators.
- [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 backed by Bits UI, 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/): A sliding panel anchored to the left or right edge, used for navigation and settings.
- [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.

## Layout

- [StickyActions](https://ui.codeatlas.com.br/docs/layout/sticky-actions/): A form action bar pinned to the bottom of a scrolling container, with glass, 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.
- [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.
- [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.

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

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