@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.

Storybook | npm

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);

License

Apache-2.0