Ground-up Space design system as React components.
Product marketing chrome: soft radius, Geist (Vercel), glass header, pill CTAs, agent picker, chat/void/code media.
Gallery: https://stevederico.github.io/space-ui/
bun install
bun run devLocal gallery: http://127.0.0.1:5173/
import '@stevederico/space-ui/styles.css'
import { Landing, Hero, Button, Picker, Header, Shell } from '@stevederico/space-ui'
// Load public/theme-init.js before the bundle (FOUC: theme-space + dark default)| Component | Role |
|---|---|
Landing / Shell / Section |
Always-dark marketing + max-w-7xl pad |
Header / NavLink / Footer |
Glass 4rem header, hairline footer |
Hero / HeroTitleMuted |
Voice-layout product hero |
Button |
primary · ghost · inverse · live (+ beam) |
Picker |
Capsule agent segmented control |
Card |
card · tile · voice · dropzone |
ChatShell / Bubble / Composer |
360px chat demo chrome |
CodeWindow / CodeLine |
Terminal + accent rail |
FeatureRow / FeatureTitle / Checklist |
Feature stacks |
VoidStage / OgCard / Orb / LiveDot |
Media primitives |
Badge |
Status pills (Beta / New / Coming Soon) |
SegmentedControl |
Generic capsule mode switcher |
CodeTabs |
Multi-lang code + Copy |
PlanCard / PricingGrid |
Pricing plans |
FeatureMatrix |
Compare-features table |
FeaturedPost / NewsGrid |
Featured + OG news grid |
VoiceGrid / VoiceGridItem |
12-col Voice spans |
ModalityCard |
Product / modality link card |
Geist Sans + Geist Mono (Vercel, SIL OFL). Official: vercel.com/font.
bash scripts/fetch-fonts.sh # jsDelivr → npm geist@1.7.2 (pinned)Woff2 binaries are gitignored. Arial metric fallbacks hold layout without files.
HSL components on :root (--color-jet, --color-sunset, …). Semantic maps on .theme-space / .landing-space. Weight 550 for medium/display. Radius 8 / 12 / 16 / 28 / pills.
| Script | |
|---|---|
bun run dev |
Vite demo |
bun run build |
Emit dist/ + demo build |
bun run typecheck |
tsc --noEmit |
MIT for components + CSS. Fonts are Geist (OFL) via scripts/fetch-fonts.sh.
