Developer software has gotten bloated, sluggish, and visually noisy.
Every day, software engineers struggle through slow web applications, inconsistent spacing, generic AI-generated component templates, and dark modes that look like an afterthought.
We got tired of software that felt built by committee.
Astera was founded with a singular conviction: Software should feel handcrafted. Every pixel must have a reason. Every animation must feel natural. Every interaction must feel intentional.
Combining the visual clarity of Linear, the instant speed of Raycast, the elegance of Stripe, the precision of Apple, and the developer experience of Vercel, Astera was built to serve as the reference implementation for open-source developer software.
Astera is a unified developer workspace and component ecosystem:
-
Astera Studio (Developer Workbench)
- API & Webhook Client: Real-time REST / GraphQL client with header tables, query param editors, and sub-millisecond response inspectors (
200 OK — 38ms). - Database & Cache Explorer: Interactive SQL editor with PostgreSQL table schema trees and live query data grids.
- Event Workflow Canvas: Visual node-based pipeline orchestrator with real-time status glow and step execution simulators.
- Encrypted Secret Vault: AES-256-GCM zero-knowledge environment variable store with value masking and one-click copying.
- Live Telemetry Streamer: Real-time diagnostic logging feed with level filters (
INFO,WARN,ERROR,DEBUG) and log inspection drawers.
- API & Webhook Client: Real-time REST / GraphQL client with header tables, query param editors, and sub-millisecond response inspectors (
-
Lumina UI (Flagship Component Library)
- 28+ Handcrafted Component Primitives: Buttons, Cards, Inputs, Dropdowns, Navigation, DataGrid, Charts, Calendar, DatePicker, Toast, ContextMenu, Tabs, Accordion, TreeView, FileUpload, Skeleton, EmptyStates, LoadingStates.
- 6 Production Application Blocks: Executive Dashboard, Developer Product Landing Page, Authentication Screen, Workspace Settings, Tiered Pricing Matrix, Admin Console Grid.
- Interactive Storybook Showcase & Prop Playground: Real-time props configurator and JSX code snippet generator.
┌────────────────────────────────────────────────────────────────────────┐
│  │
│ *Real-time REST API Client, PostgreSQL Query Explorer & Workflow Canvas*│
└────────────────────────────────────────────────────────────────────────┘
Placeholder:
media/astera-studio-demo.gif— Sub-millisecond tab switching, live query execution, and response telemetry.
┌────────────────────────────────────────────────────────────────────────┐
│  │
│ *28+ Handcrafted Primitives & 6 Full Production Application Blocks* │
└────────────────────────────────────────────────────────────────────────┘
Placeholder:
media/lumina-ui-storybook.gif— Interactive prop configurator, spring physics button animations, and live JSX generator.
┌────────────────────────────────────────────────────────────────────────┐
│  │
│ *Global fuzzy search, workspace action dispatcher & key navigation* │
└────────────────────────────────────────────────────────────────────────┘
Placeholder:
media/command-palette-demo.gif— Triggered viaCmd+K/Ctrl+K. Instant tool jumping and keyboard navigation.
Astera is engineered to run at 60 FPS with zero layout thrashing or unnecessary re-renders.
| Metric | Astera Benchmark | Industry Average | Improvement |
|---|---|---|---|
| Initial HMR Startup | < 16 ms | ~450 ms | 28x Faster |
| Tab State Transition | < 1 ms | ~120 ms | Instantaneous |
| Memory Footprint | ~32 MB RAM | ~350 MB RAM | 10x Leaner |
| Gzipped CSS Bundle | 6.52 KB | ~45 KB | 85% Smaller |
| Gzipped JS Bundle | 115.61 KB | ~850 KB | 86% Smaller |
| Lighthouse Score | 100 / 100 | ~72 / 100 | Perfect Score |
Astera is designed keyboard-first. Every module and workspace action can be triggered in less than 2 keypresses.
| Shortcut | Action | Description |
|---|---|---|
| ⌘ + K | Command Palette | Open Raycast-grade instant search & quick action modal |
| ⌘ + Enter | Send API Request | Dispatch active HTTP request payload |
| ⌘ + E | Run SQL Query | Execute active query against PostgreSQL cluster |
| ⌘ + R | Run Node Workflow | Trigger visual pipeline step execution |
| G A | API Workbench | Jump to API & Webhook Studio |
| G D | Database Explorer | Jump to Database & Query Explorer |
| G W | Workflow Canvas | Jump to Visual Node Canvas |
| G V | Secret Vault | Jump to Encrypted KMS Variable Store |
| G L | Telemetry Stream | Jump to System Log Streamer |
| G U | Lumina UI Showcase | Toggle between Astera Studio & Lumina UI Showcase |
- Node.js
^18.0.0or^20.0.0 - npm
^9.0.0or pnpm^9.0.0/ yarn / bun
# Clone the repository
git clone https://github.com/astera-dev/astera.git
# Navigate into the project root
cd astera
# Install dependencies (pnpm recommended)
pnpm install
# Start the Vite development server
npm run devOpen http://localhost:3000 in your browser.
import { LuminaButton, LuminaSwitch, LuminaDataGrid, Badge } from '@/lumina/components';
export function DeveloperPanel() {
return (
<div className="p-6 bg-[#11131b] border border-[#272d40] rounded-2xl space-y-4">
<div className="flex justify-between items-center">
<h3 className="text-sm font-bold text-slate-100 font-sans">Active Services</h3>
<Badge variant="success" dot>48 Nodes Online</Badge>
</div>
<LuminaDataGrid
data={[
{ id: '1', service: 'astera-control-plane', p99: '4.2ms', status: 'Healthy' },
{ id: '2', service: 'astera-auth-vault', p99: '1.8ms', status: 'Healthy' },
]}
columns={[
{ key: 'service', header: 'Service Name' },
{ key: 'p99', header: 'P99 Latency' },
{ key: 'status', header: 'Status', render: (r) => <Badge variant="purple">{r.status}</Badge> },
]}
/>
<LuminaButton variant="primary" size="sm">
Dispatch Deployment Pipeline
</LuminaButton>
</div>
);
}Astera is built on three architectural pillars:
- Strict Spatial Token System (8pt Grid): Every margin, padding, border radius, and gap strictly aligns to 4px and 8px spatial tokens (
p-2,p-4,m-6,m-8). - Obsidian Dark Mode Primacy: Handcrafted HSL tokens (
#090a0fbase canvas,#11131bcard surface,#272d40pristine borders,#6366f1indigo accent glow). - Framer Motion Spring Physics: Sub-millisecond spring dynamics (
stiffness: 400,damping: 30,mass: 0.8) with active click scale feedback (scale-[0.98]).
For full specs, see:
- v1.0.0 Core Launch: Astera Studio Developer Workbench + Lumina UI (28+ Primitives, 6 Application Blocks, Interactive Storybook Playground).
- v1.1.0 (Q3 2026): High-Performance Vector Charting Engine & 100,000+ Row DataGrid Virtualization.
- v1.2.0 (Q4 2026): Native Tauri 2.0 Desktop Container & React Native Mobile Companion Package (
@lumina-ui/native).
See docs/ROADMAP.md for full timeline breakdown.
Is Lumina UI free and open source?
Yes! Lumina UI and Astera Studio are 100% open source under the MIT License. You are free to use them in commercial applications, open-source projects, or internal corporate tooling.
How does Astera differ from traditional UI component kits?
Most component libraries are ad-hoc collections of utility classes. Astera is a unified design system and developer workbench engineered with a strict 8pt grid, WCAG AAA accessibility, custom motion physics, zero TypeScript compilation warnings, and desktop-grade performance.
Can I package Astera Studio as a native desktop app?
Yes! Astera Studio is built with Vite and clean SPA architecture, making it 100% compatible with Tauri 2.0 or Electron desktop wrappers.