Overview
The Gremorie component catalog - 83 primitives in 8 categories, shipped as React and Angular editions, installable via registry or npm.
AI
Inputs
Form
Buttons
Text
Selection
Date
Layout & display
Display
Data
Containers
Interaction
Overlays
Navigation
Feedback
Gremorie ships 83 production primitives, from the everyday
(Button, Dialog, Table) to a full AI surface vocabulary
(PromptInput, Message, Reasoning, Artifact). Every component
exists in two editions, React and Angular, with the same anatomy
and the same prop contract, and every one is themed entirely through
design tokens, so your brand applies without touching
component code.
The eight categories
AI
23 components. The chatbot surface (PromptInput, Message, Reasoning, Tool), code and artifacts (CodeBlock, Artifact, WebPreview), and AI utilities.
Forms
17 components. Form wiring plus every input: Button, Input, Textarea, Select, Checkbox, Switch, Slider, Calendar, DatePicker.
Overlays
11 components. Everything that floats: Dialog, Sheet, Drawer, Popover, Tooltip, Command, the menus, and toasts via Sonner.
Display
10 components. Static presentation: Card, Table, Badge, Avatar, Accordion, Carousel, Separator.
Data
8 components. The charting system: the Chart core plus area, bar, line, pie, radar, radial, and scatter types.
Navigation
6 components. Wayfinding: Sidebar, Tabs, Breadcrumb, Menubar, NavigationMenu, Pagination.
Containers
4 components. Layout shells: AspectRatio, Resizable, ScrollArea, Stack.
Feedback
4 components. System status: Alert, Progress, Skeleton, Spinner.
Two editions, one contract
Each component ships as a React edition (rx-*) and an
Angular edition (ng-*). The two are not ports of convenience:
they share a fixed anatomy tree and prop-parity contract, so a team
that knows PromptInput in React can read the Angular template
without relearning anything. The Gremorie workbench renders both
editions side by side for every component, in every theme, which is
how parity is validated before anything is published.
Every component page documents both editions in tabs; the anatomy tree near the top of each page is shared by both.
How to install
Two distribution paths. Pick per project, or mix.
Registry (you own the source). The CLI copies the component's source into your repo. You edit it like any other file in your codebase, and there is no runtime dependency on Gremorie:
npx gremorie@latest add rx-button # React edition
npx gremorie@latest add ng-button # Angular editionnpm (versioned package). Install the full edition and import what you need. Tree-shaking keeps only what you use:
npm i @gremorie/react # or @gremorie/angularimport { Button } from '@gremorie/react';
export function Example() {
return <Button>Ship it</Button>;
}The trade-off: the registry gives you full control and zero lock-in;
npm gives you one versioned source of truth and updates via
npm update. Setup details for both paths are in
Installation.
What every page gives you
Each component page follows the same shape: a live Preview / Code surface at the top, the anatomy tree of its subcomponents, the installation command, the full API reference for both editions, and accessibility and theming notes. If you want the judgment layer, when to reach for a button versus a link, label rules, hierarchy, that lives in the UX corpus, not here.
Contributing
The bar every page above meets is defined in the documentation standard. To add a component or improve an existing one, start at Contributing.