Introduction

Re-usable components built with Radix UI and Tailwind CSS.

This is a collection of re-usable components that you can copy and paste into your apps. Built with Radix UI and Tailwind CSS.

Installation

1. Install the package

pnpm add @monorepo/ui

2. Import styles

Add the following to your root CSS file (e.g., app/globals.css):

@import "@monorepo/ui/styles";

@tailwind base;
@tailwind components;
@tailwind utilities;

3. Configure Tailwind

Update your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,jsx,ts,tsx}',
    './components/**/*.{js,jsx,ts,tsx}',
    // Scan UI library
    './node_modules/@monorepo/ui/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Usage

Import components

import { Button, Badge, Typography } from '@monorepo/ui';

export function MyComponent() {
  return (
    <div>
      <Typography variant="h1">Hello World</Typography>
      <Badge variant="red | blue | yellow | green | violet">New</Badge>
      <Button variant="primary" size="lg">
        Click me
      </Button>
    </div>
  );
}

Import utilities

import { cn } from '@monorepo/ui/lib/utils';

export function MyComponent({ className }) {
  return (
    <div className={cn('base-styles', className)}>
      Content
    </div>
  );
}

Import hooks

import { useToast } from '@monorepo/ui/hooks/use-toast';

export function MyComponent() {
  const { toast } = useToast();

  return (
    <button onClick={() => toast({ title: 'Success!' })}>
      Show toast
    </button>
  );
}

Getting Started

Browse the components in the sidebar to see examples and usage. Each component page includes live previews, code examples, and implementation details.

Features

Accessible components built with Radix UI
Styled with Tailwind CSS
Fully typed with TypeScript
Dark mode support
Customizable and composable
Tree-shakeable exports

Components

Explore the component library using the navigation sidebar. Each component includes:

Live interactive examples
Code snippets you can copy
API documentation
Accessibility information