One design system. React and Angular, at parity.
83 copy-paste primitives, tokens, and production blocks, shipped to both frameworks from one registry. Install with one command, own the source, restyle with your tokens.
npx gremorie add button
Properties
Assistant is a block - you own the source. gremorie add block-assistant copies it in; wire onSubmit to your endpoint to make the mock real.
Gremorie can make mistakes. Check important info.
- 83 primitives
- 8 categories
- 5 production blocks
- 2 frameworks
- 192 registry items
- MIT licensed
React ⇄ Angular
Same component. Both frameworks. No drift.
Every primitive ships in a React and an Angular edition with the same anatomy, the same props, and the same tokens, enforced by a contract lint in CI, not by good intentions. Pick a framework tab: the code changes, the rendered result does not.
A design system you own, end to end
The fundamentals of a serious component library, and a registry that machines can read.
83 primitives across 8 categories
From buttons to charts to a full conversation surface. Install from the registry, own the source, customize with your tokens.
Blocks, not just primitives
Whole screens composed from the primitives. Install one block and get a wired-up layout, variations included, in either framework.
Artifacts that render real output
Schema in, component out. This is the real ChartArtifact from the registry, complete with its chart and table views, downloads and actions, paired with the exact code that renders it.
Monthly revenue
Last 6 months, USD thousands
| month | Revenue ($k) |
|---|---|
| Jan | 42 |
| Feb | 58 |
| Mar | 51 |
| Apr | 66 |
| May | 74 |
| Jun | 69 |
import { ChartArtifact } from '@gremorie/rx-artifacts';import { TrendingUpIcon } from 'lucide-react';const revenueData = [ { month: 'Jan', revenue: 42 }, { month: 'Feb', revenue: 58 }, { month: 'Mar', revenue: 51 }, { month: 'Apr', revenue: 66 }, { month: 'May', revenue: 74 }, { month: 'Jun', revenue: 69 },];export function RevenueArtifact() { return ( <ChartArtifact title="Monthly revenue" description="Last 6 months, USD thousands" icon={TrendingUpIcon} type="bar" data={revenueData} categoryKey="month" valueKey="revenue" categoryLabel="Month" valueLabel="Revenue ($k)" fileName="monthly-revenue" /> );}import { Component } from '@angular/core';import { ChartArtifact } from '@gremorie/ng-artifacts';import { provideIcons } from '@ng-icons/core';import { lucideTrendingUp } from '@ng-icons/lucide';@Component({ selector: 'app-revenue-artifact', imports: [ChartArtifact], providers: [provideIcons({ lucideTrendingUp })], template: ` <chart-artifact title="Monthly revenue" description="Last 6 months, USD thousands" icon="lucideTrendingUp" type="bar" [data]="revenueData" categoryKey="month" valueKey="revenue" categoryLabel="Month" valueLabel="Revenue ($k)" fileName="monthly-revenue" /> `,})export class RevenueArtifact { readonly revenueData = [ { month: 'Jan', revenue: 42 }, { month: 'Feb', revenue: 58 }, { month: 'Mar', revenue: 51 }, { month: 'Apr', revenue: 66 }, { month: 'May', revenue: 74 }, { month: 'Jun', revenue: 69 }, ];}Theme everything with tokens
Three layers: primitive, semantic, chart. Override at any layer to retheme your entire app. The settings panel below is built from real Gremorie primitives; try a few changes.
Violet
Workspace settings
Manage your workspace profile and billing.
Product updates and billing alerts.
Ship your own design system,
not a dependency.
Start with 83 primitives and 5 blocks that already agree with each other: in React, in Angular, and in front of your AI tools.