@luanthnh/cntt-ui

A modern, high-performance UI component library built with React, Tailwind CSS (v4), Radix UI, and Framer Motion.

✨ Features

• 🚀 Fast & Lightweight: Optimized build performance with Tsup.
• 🎨 Stunning Aesthetics: Modern design trends including Glassmorphism and Dynamic Animations.
• ♿ Accessible: Follows WAI-ARIA standards powered by Radix UI.
• 🛠️ Developer Friendly: Comprehensive component system ready for production.
• 📚 Documentation: Live Storybook Demo

📦 Installation

Use your preferred package manager to install:

# npm
npm install @luanthnh/cntt-ui

# pnpm
pnpm add @luanthnh/cntt-ui

# yarn
yarn add @luanthnh/cntt-ui

🛠️ Setup

1. Import Global CSS

To ensure components are styled correctly, import the global CSS file in your application's entry point (usually layout.tsx or index.tsx):

import '@luanthnh/cntt-ui/globals.css';

2. Tailwind CSS (v4) Configuration

This library is built with Tailwind CSS v4. Ensure your project is set up with Tailwind CSS v4. If you are using Next.js, install @tailwindcss/postcss and configure it accordingly.

🚀 Usage

Here is a basic example of how to use the components:

import { Button, Card, Text } from '@luanthnh/cntt-ui';

export default function App() {
  return (
    <Card className="max-w-sm p-6">
      <Text variant="h3" className="mb-4">
        Welcome!
      </Text>
      <Text className="mb-6 opacity-80">Discover the power of @luanthnh/cntt-ui components.</Text>
      <Button variant="primary" onClick={() => alert('Hello!')}>
        Get Started
      </Button>
    </Card>
  );
}

🧩 Component List

@luanthnh/cntt-ui provides over 50+ components:

• Primitives: Button, Badge, Avatar, Separator, Skeleton.
• Form: Input, Checkbox, Select, RadioGroup, Switch, Form (React Hook Form), DatePicker.
• Layout: Container, HStack, VStack, AspectRatio, ScrollArea.
• Navigation: Breadcrumb, Pagination, Tabs, NavigationMenu, Sidebar.
• Feedback: Alert, AlertDialog, Dialog, Drawer, Popover, Tooltip, Sonner.
• Data Display: Table, Card, Accordion, Carousel, Chart.
• Motion: Marquee, NumberTicker, Waves, AutoHeight, Cursor.

🛠️ Development

To contribute or customize the library:

1. Clone the repo: git clone <repo-url>
2. Install dependencies: pnpm install
3. Launch Storybook to preview components: pnpm dev

Designed with ❤️ by luanthnh 🚀