UI Kit - Radix UI

A modern, accessible component library built with Radix UI primitives and styled with Tailwind CSS.

Features

🎨Beautiful, customizable components

♿Fully accessible (WCAG compliant)

🎯Built with Radix UI primitives

💅Styled with Tailwind CSS

📦Easy to integrate

🔧TypeScript support

Installation

Option 1: Install as Library (Recommended)

Install the required dependencies in your existing project:

npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-tooltip @radix-ui/react-separator @radix-ui/react-slot class-variance-authority clsx tailwind-merge

# or with yarn
yarn add @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-tooltip @radix-ui/react-separator @radix-ui/react-slot class-variance-authority clsx tailwind-merge

# or with pnpm
pnpm add @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-tooltip @radix-ui/react-separator @radix-ui/react-slot class-variance-authority clsx tailwind-merge

# or with bun
bun add @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-tooltip @radix-ui/react-separator @radix-ui/react-slot class-variance-authority clsx tailwind-merge

Option 2: Clone Demo Project

To run the demo and explore all components:

# Clone the repository
git clone https://github.com/yoyoucay/radix-ui-components-lib.git
cd radix-ui-components-lib

# Install dependencies
npm install
# or yarn install / pnpm install / bun install

Getting Started

After installing dependencies, copy the component files to your project and import them:

import { Button, Dialog, Tooltip } from '@/components/ui';

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Tooltip content="Helpful information">
        <span>Hover me</span>
      </Tooltip>
    </div>
  );
}

Available Components

Button

Versatile button component with multiple variants and sizes

Dialog

Modal dialogs for confirmations, forms, and important messages

Dropdown Menu

Context menus and action lists for user interactions

Tooltip

Contextual help and information on hover

Separator

Visual dividers to separate content sections

Navbar

Navigation header component

Sidebar

Side navigation component

Development

Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 to view the demo.

Project Structure

src/
├── components/
│   └── ui/          # UI components
├── app/
│   └── demo/        # Demo pages
└── lib/             # Utility functions

Links

GitHub Repository →Radix UI Documentation →Tailwind CSS Documentation →