Build production UI, faster.
Aether UI is a premium open-code design system for SaaS dashboards, marketing sites, and AI-powered applications. Components are installed directly into your project via the CLI — you own the source, not a dependency.
What is Aether UI?
Aether UI is not a component libraryin the traditional sense. You don't import components from a package at runtime. Instead, the CLI copies battle-tested component source files directly into your project — you get readable TypeScript and JSX that you can edit, extend, and version like any other file in your codebase.
This solves the customisation dead-end that comes with traditional libraries. Need to change how a Dialog animates? Just edit the file. Need a Button variant that doesn't exist? Add it. No overrides, no wrappers, no fighting the API — the component is yours.
npx aether-ui add dashboard-shell
# The source now lives in your repo — edit freely
src/components/blocks/dashboard-shell.tsx
Who is this for?
SaaS product teams
Ship dashboards, settings pages, and billing flows without building each component from scratch. The blocks layer gives you complete page sections in one CLI command.
Indie hackers and solo builders
Go from idea to working UI in an afternoon. Install only what you need, own everything you install, and move fast without a design team.
Agencies and consultancies
A consistent, high-quality component foundation that works across projects. Token-driven theming means each client gets their brand without duplicated component logic.
Design principles
Open code
Every component is plain, readable TypeScript and JSX. No magic, no wrappers, no black boxes. What you see in the docs is exactly what lives in your project.
Token-driven
All visual values — colors, radius, shadows, motion — are CSS variables backed by a design token system. Theming is a single CSS override, not a rebuild.
Accessible by default
Built on Radix UI primitives — keyboard navigation, ARIA roles, focus management, and screen reader support are built in, not bolted on.
Composable
Every component uses a consistent, composable API. Primitives compose into patterns, patterns compose into blocks. Nothing is a one-off.
AI-ready
Plain source in your project means LLMs can read, understand, and improve your components without library-specific knowledge. First-class MCP server and AI metadata included.
Registry-native
Compatible with the shadcn/ui registry format — components can be distributed, versioned, and updated from any registry endpoint using the CLI.
Architecture layers
Aether UI is structured in four layers. Each layer may depend on the layers below it, never above.
@aetherstack/blocks10 page-level compositions: dashboard shells, auth pages, marketing sections, AI chat layouts.
@aetherstack/patterns17 app-level compound components: DataTable, CommandPalette, PageHeader, Kanban, and more.
@aetherstack/ui31 foundational components: Button, Input, Dialog, Tabs, Sidebar, and AI-native primitives.
@aetherstack/tokensDesign tokens: colors, spacing, typography, radius, shadows, motion.
Built with
React 18+
Component model
TypeScript
Strict typing throughout
Tailwind CSS
Utility-first styling
Radix UI
Accessible primitives
Lucide React
Default icon library
CVA
Variant management
Quick start
# 1. Initialize Aether UI in your project
npx aether-ui@latest init
# 2. Add components
npx aether-ui add button input label badge card
# 3. Import and use
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"For a complete walkthrough with framework-specific steps, see the Installation guide.
How is this different from shadcn/ui?
Aether UI follows the same open-code philosophy as shadcn/ui and its registry format is compatible with the shadcn/ui convention. The key differences: