UI Test Package 002

A modern React UI component library built with TypeScript and Tailwind CSS.

Installation

npm install ui-test-package-002

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install react react-dom

Note: Tailwind CSS is now included as a dependency, so you don't need to install it separately. However, if you want to use your own Tailwind configuration, you can still install it as a peer dependency.

Important: CSS Purging Fix

This package now includes all utility classes explicitly to prevent Tailwind's purging system from removing styles that are only used in the package components. This ensures that classes like bg-primary, rounded, flex, etc. will work even if they're not used elsewhere in your project.

Usage

Importing Components

import { Button, Input, Card } from 'ui-test-package-002';

Importing Styles

Option 1: Full Styles (Recommended)

// In your main.tsx or _app.tsx
import 'ui-test-package-002/globals.css';

Option 2: Tailwind v3 Compatible

// For Tailwind CSS v3.x
import 'ui-test-package-002/globals-v3.css';

Option 3: Tailwind v4 Compatible

// For Tailwind CSS v4.x (recommended for Next.js 15)
import 'ui-test-package-002/globals-v4-fixed.css';

Option 4: Tailwind v4 Legacy

// For Tailwind CSS v4.x (legacy format)
import 'ui-test-package-002/globals-v4.css';

Option 5: Components Only (No Tailwind imports)

// When you already have Tailwind configured
import 'ui-test-package-002/components.css';

CSS Import in CSS Files

Since CSS files can't import other CSS files directly, you have two options:

Option 1: Use JavaScript/TypeScript imports

// In your main.tsx or _app.tsx
import 'ui-test-package-002/globals.css';

Option 2: Copy the styles manually

Copy the contents of the CSS file you need into your own CSS file.

Next.js Configuration

Make sure to add the package to your next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['ui-test-package-002']
  // ... other config
};

module.exports = nextConfig;

Tailwind Configuration

Make sure your tailwind.config.js includes the package:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/ui-test-package-002/**/*.{js,ts,jsx,tsx}'
  ]
  // ... other config
};

Available Components

• Button
• Input
• Label
• Textarea
• Select
• Switch
• Checkbox
• Radio Group
• Slider
• Progress
• Avatar
• Dialog
• Sheet
• Drawer
• Popover
• Tooltip
• Dropdown Menu
• Command
• Calendar
• Pagination
• Tabs
• Toast
• Alert
• Form
• Card
• Table
• Chart
• And more...

Available Hooks

• useToast - For toast notifications
• useInitThemeCss - For theme initialization

Available Utilities

• cn - For conditional class names
• And more utility functions

Version Compatibility

• Tailwind CSS v3.x: Use globals-v3.css
• Tailwind CSS v4.x: Use globals-v4.css
• Auto-detect: Use globals.css (defaults to v4)

License

MIT