@agentero/design-system
A React component library built with Tailwind CSS v4 and Radix UI primitives. Each component is individually importable, fully typed, and designed to integrate seamlessly into any Tailwind-based project.
Installation
yarn add @agentero/design-system
Peer dependencies
This package requires the following peer dependencies:
yarn add react react-dom tailwindcss
Setup
Tailwind CSS configuration
Add the design system as a Tailwind source so that the CSS for component classes is generated:
/* app.css */
@import 'tailwindcss';
@source "@agentero/design-system/theme";
Components
import { ComponentName } from '@agentero/design-system/ComponentName';
Utilities
cn
A class name merging utility combining clsx and tailwind-merge. Useful for conditionally joining Tailwind classes without conflicts.
import { cn } from '@agentero/design-system/lib';
cn('px-4 py-2', isActive && 'bg-blue-500', className);
AI integration (MCP)
This package ships a Model Context Protocol server that gives AI coding assistants access to component documentation, props, and usage examples — no Storybook runtime needed.
Add to your project.mcp.json:
{
"mcpServers": {
"design-system": {
"command": "node",
"args": ["./node_modules/@agentero/design-system/mcp/server.mjs"]
}
}
}
Or run it directly:
npx @agentero/design-system-mcp
The server exposes three tools:
- list-all-documentation — discover all available components and docs
- get-documentation — get full docs, props, and usage examples for a component
- get-documentation-for-story — get details for a specific story variant
Local development
To develop the design system alongside a consumer app without a build process, link the package locally:
# In the design system directory
yarn link
# In the consumer app directory
yarn link @agentero/design-system
The root package.json exports point directly to TypeScript source files, so the consumer's bundler (Vite, Next.js, etc.) picks up changes instantly via HMR — no build step or watcher needed.
If using Next.js, add the package to transpilePackages in next.config.ts:
transpilePackages: ['@agentero/design-system'],
Unlinking
# In the consumer app directory
yarn unlink @agentero/design-system
yarn install --force