Skip to main content
v0.8.0 · Open source · MIT

One design system. React and Angular, at parity.

Everything an AI product needs: conversation, artifacts, charts, plus the primitives, tokens and blocks around them. One command installs it, and you own the source.

npx gremorie add button
Get startedView components

Properties

Code
npx gremorie add rx-assistant
npm i @gremorie/ng-ai
Preview
How did Q3 revenue break down by region? Give me a chart plus the underlying table I can drop straight into the board deck.

Pulling Q3 revenue from the finance warehouse, comparing against Q2 and the forecast, then drafting a board-ready one-pager. Keeping it to headline, three KPIs, and one risk.

Q3 revenue landed at $4.2M, up 18% QoQ and 6% ahead of forecast, driven by net expansion in the enterprise tier.

By region

  • North America carried the quarter at $2.18M (52% of total)
  • EMEA followed at $1.12M, with APAC and LATAM rounding out the mix

The regional breakdown is charted below. Toggle to the table view for the exact figures, or download the data and image straight from the artifact.

Q3 revenue by region

Chart · generated just now

Bar chart of Revenue by region
regionRevenue
North America2180000
EMEA1120000
APAC640000
LATAM260000

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.

Browse the components
Rendered output
The same Button, twice

A design system you own, end to end

The fundamentals of a serious component library, and a registry that machines can read.

You own the code
Install from the registry and the source lands in your repo. No black box, no version lock. Refactor every line.
Parity, enforced
React and Angular editions share anatomy, props, and tokens. A contract lint keeps them from drifting apart.
Token-driven theming
Every primitive reads from a three-layer token system. Change one layer, retheme both frameworks.
AI-native by design
The registry and MCP server make the system legible to Claude, Cursor, and Codex, so generated UI matches shipped UI.

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.

View all components
23
AI
Conversation, Message, PromptInput, Reasoning, Artifact, Tool.
17
Forms
Button, Input, Select, Checkbox, Switch, Form, Calendar.
11
Overlays
Dialog, Drawer, Sheet, Popover, Tooltip, Command.
10
Display
Card, Badge, Avatar, Accordion, Carousel, Table, Item.
6
Navigation
Tabs, Sidebar, Breadcrumb, Pagination, NavigationMenu.
4
Containers
ScrollArea, Stack, AspectRatio, Resizable.
4
Feedback
Alert, Progress, Skeleton, Spinner.
8
Data
AreaChart, LineChart, BarChart, ScatterChart, PieChart, RadarChart, RadialChart.

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.

Learn more about artifacts

Monthly revenue

Last 6 months, USD thousands

Bar chart of Revenue ($k) by month
monthRevenue ($k)
Jan42
Feb58
Mar51
Apr66
May74
Jun69
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 },  ];}

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.

Get startedStar on GitHub