Headless by default
No component owns your colour palette. Tokens resolve the final surface in the app.
Grassroot UI
One core. Every framework.
Components are owned by your repo, while behaviour, accessibility and tokens stay aligned across React, Vue, Angular, Svelte and Solid.
96components
90charts
5frameworks
10parity layers
$ npx grassroot init --framework svelte
wrote grassroot.json
$ npx grassroot add ui/button ui/select ui/data-table
src/lib/ui/button.svelte
src/lib/ui/select.svelte
src/lib/ui/data-table.svelte
0 new dependencies
$ npx grassroot doctor
10/10 parity layers greenThe premise
Write the behaviour once. Render it where the product lives.
The adapter is framework-specific. The state machine, contract and theme surface are not.
Source in your repo
The CLI copies the adapter source. You can edit it without taking a dependency on a black box.
Parity is executable
Behaviour, DOM, accessibility, SSR, types and visual output are checked before release.
The proof
One Select, five real islands.
The page is server-rendered. Only the framework panel you open hydrates.
Show codeapps/grassroot/src/components/react/SelectDemo.tsx
<Select options={options} defaultValue="vue" label="Adapter" />vue
Show codeapps/grassroot/src/components/SelectDemo.vue
<Select :options="options" v-model="value" label="Adapter" />Angular
vue
Show codeapps/grassroot/src/components/angular/select-demo.component.ts
<grassroot-select [options]="options" [(value)]="value" label="Adapter" />vue
Show codeapps/grassroot/src/components/SelectDemo.svelte
<Select options={options} bind:value label="Adapter" />Show codeapps/grassroot/src/components/solid/SelectDemo.tsx
<Select options={options} defaultValue="vue" label="Adapter" />Continue