SageMake it Lovable
Components that feel alive. Themes with real personality. Motion your users control. Designed for humans. Fluent with AI.
The Four-Layer Hierarchy
See how a single design decision ripples through the entire system. Select a color token below and watch it update every layer.
1. Design Tokens
The atomic values—colors, typography, spacing. Change the "Primary Color" token here:
Code that flows like water.
Don't fight with CSS class names. Use semantic, typed React components that handle the heavy lifting for you.
Fully typed with TypeScript
Accessible ARIA attributes included
Consistent API across all components
import { Button, Card, Text } from '@thesage/ui';
export function WelcomeCard() {
return (
<Card className="p-6 max-w-sm">
<Text variant="h3" className="mb-2">
Hello World
</Text>
<Text className="mb-4 text-muted-foreground">
Built with Sage Design Engine components.
</Text>
<Button variant="default" className="w-full">
Click Me
</Button>
</Card>
);
}Hello World
Built with Sage Design Engine components.
Everything You Need to Ship
A complete toolkit designed for modern web development.
Accessibility First
Every component is built with WCAG AA/AAA standards in mind. Keyboard navigation and screen reader support are baked in, not bolted on.
Dark Mode Native
Switch modes instantly. All tokens adapt automatically. Try it now!
Built for Speed
Copy, paste, ship. Designed to get you from idea to production in record time.
Responsive by Default
Components look great on mobile, tablet, and desktop. No complex media queries required to get started.
Open Source & MIT Licensed
Free for personal and commercial projects.