@atom-forge/ui · Interfaces
Build the interface, not every primitive.
Forms, tables, overlays and dashboards need a coherent foundation. AtomForge UI provides Svelte 5 components with typed props and semantic theme tokens, while leaving room for your application’s own layout and visual decisions.
What it is
A component dependency, not a copy-paste collection.
The library supplies reusable controls, layout pieces, data displays and overlay tools for Svelte 5. Components use runes and snippets, with TypeScript describing their props and supported combinations.
Semantic theme tokens and Tailwind classes provide a shared visual language. A Root component supplies the context for theme behaviour and overlay managers, so components can participate in the same application-level system.
Why choose UI?
Native Svelte 5 patterns
Use runes, typed props and composable snippets rather than mixing legacy slot patterns into a new application.
A theme that travels with the UI
Semantic colors such as surface, frame and canvas-contrast let components respond consistently to the surrounding theme instead of hard-coding light or dark values.
Centralized overlay management
Modal, toast, drawer and context-menu managers keep overlay plumbing out of individual screens. Use the documented manager APIs for your installed version.
Accessibility building blocks
The source describes focus management, keyboard interaction and ARIA support in complex controls. Your content, composition and application still need accessibility testing.
How it works
-
Set up styles
Follow the getting-started guide to load Tailwind CSS 4, the library theme and the source directives needed to generate component styles.
-
Provide application context
Wrap the application in Root to establish the shared theme and overlay managers.
-
Compose screens
Import only the components you need, pass typed props and use snippets for composition. Customize semantic tokens and classes rather than maintaining copied component files.
An honest fit check
Trade-offs, not fine print
Svelte 5 is the baseline
This is not a compatibility layer for Svelte 4 or another frontend framework. Adoption may require upgrading an older application.
Tailwind CSS 4 is part of the stack
The styling system depends on Tailwind 4. A project committed to a different CSS pipeline will need to account for that integration.
Managers are a different overlay model
Imperative overlay flows take some adjustment if your team expects every modal to be controlled by a local boolean. Consult the installed version’s API rather than relying on concept snippets.
In practice
The same building blocks used on this page
Card and Chip are imported from the installed library in this landing component and the homepage. This minimal composition uses their existing children API and the site’s semantic tokens.
<script lang="ts">
import { Card, Chip } from '@atom-forge/ui';
</script>
<Card class="p-6 space-y-3">
<Chip>Svelte 5</Chip>
<h2 class="text-xl font-bold text-canvas-contrast">Project overview</h2>
<p class="text-muted-contrast">A shared visual foundation.</p>
</Card>Explore the documentation
Guide 1
Getting Started
Set up Svelte 5, Tailwind CSS 4, the theme stylesheet, Root, and managed overlays.
Read guide →
Guide 2
Theming
Manage dark mode and customize semantic CSS tokens while preserving contrast in both modes.
Read guide →
Guide 3
Color System
Understand semantic pairing, surface hierarchy, action colors, and dynamic interaction states.
Read guide →
Guide scope: @atom-forge/ui 0.0.34. Consult the versioned package source; upstream main may differ.