Installation
Set an app up, then add components by name.
Start with a React 19 application that uses Tailwind CSS 4 and shadcn with Base UI. Fabrials UI builds on Base UI's composition API, like shadcn's Nova styles.
Set the app up
For a new app, create it with shadcn and the Fabrials style:
npx shadcn@latest init https://ui.fabrials.com/r/init.jsonFor an existing shadcn app, add the same entry:
npx shadcn@latest add https://ui.fabrials.com/r/init.jsoninit installs @fabrials/ui, imports its tokens, IBM Plex and component styles into your global CSS, sets the Highstorm palette for light and dark, and writes components.json with shadcn's Base UI style and the @fabrials registry. shadcn asks before replacing an existing theme.
To keep your own palette, add only the styles. Fabrials components then take your colours from shadcn's tokens:
npx shadcn@latest add https://ui.fabrials.com/r/styles.jsonAdd the registry
init adds the Fabrials registry for you. If you only added styles, add it to components.json yourself, so you can add components by name:
{ "registries": { "@fabrials": "https://ui.fabrials.com/r/{name}.json" }}Every component page shows its command, for example:
npx shadcn@latest add @fabrials/mcp-dashboard @fabrials/kibo-kanban @fabrials/buttonThe address works too: https://ui.fabrials.com/r/<name>.json.
What gets installed
For example, after init and add @fabrials/button @fabrials/mcp-dashboard @fabrials/magicui-terminal, a Next.js app has these new files:
- components.jsonstyle and @fabrials registry
- globals.cssimports the Fabrials styles
- button.tsxshim
- terminal.tsxMagic UI, MIT notice on top
| You add | You get |
|---|---|
A Fabrials control (button, dialog…) | A shim in components/ui/ that re-exports the @fabrials/ui control under shadcn's names |
| A WebMCP or MCP block | Its source in components/webmcp/ and helpers in lib/mcp/ and lib/webmcp/ |
| A component from another library | Its source where that library puts it, with the library's license at the top of every file |
Components import @fabrials/ui directly as well. Use the package in new code; use the shims where code expects shadcn's paths.
Enable native WebMCP in Chrome
WebMCP is experimental. Chrome needs a flag before a page can register tools.
Copy this address and open it in Chrome.
Chrome flag chrome://flags/#enable-webmcp-testingSet WebMCP for testing to Enabled, relaunch Chrome and open your app again.
The flag enables native tool registration. The playground's own tool runner, the ordinary controls and remote MCP connections work without it. See Chrome's WebMCP setup.
Add browser tools to your interface
npx shadcn@latest add @fabrials/webmcp-providerWrap your interactive view in WebMCPProvider, then register an application action with useWebMCPTool. Follow the complete WebMCP example or try a working playground scenario.
Connect to a remote MCP server
npx shadcn@latest add @fabrials/mcp-dashboard"use client";import { MCPDashboard } from "@/components/webmcp/mcp-dashboard"; export default function Console() { return <MCPDashboard defaultEndpoint="https://your-server.example/mcp" />;}Your endpoint must accept the browser origin through CORS. The demo endpoint on this site is same-origin; it is not a general-purpose hosted MCP service.
Next.js and Vite
In Next.js, render interactive components under a client boundary. Helpers do not access window, document or storage during server rendering. The optional connector must remain in a Node server route.
In Vite, render the provider in your root React tree. Configure @/* in TypeScript and the Vite resolver, and ensure Tailwind scans the copied component files.
Updates
The source belongs to you. Review registry updates before overwriting customised files; several entries share helpers, so keep related files in sync. Keep the license notices at the top of files that came from other libraries.