open-index/open-npm huggingface dataset:
npm package: @luanthnh/cntt-ui
Description: A modern, high-performance UI component library built with **React**, **Tailwind CSS (v4)**, **Radix UI**, and **Framer Motion**.
Latest version: 0.1.15

# @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](https://cntt-ui.vercel.app/)

## 📦 Installation

Use your preferred package manager to install:

```bash
# 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`):

```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:

```tsx
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** 🚀
npm package: @luanthnh/eslint-config
Description: Shared ESLint and Prettier configuration for Next.js projects
Latest version: 1.0.1

# @luanthnh/eslint-config

Shared ESLint and Prettier configurations for Next.js projects.

## Installation

You can install this package using any package manager:

```bash
# npm
npm install -D @luanthnh/eslint-config

# pnpm
pnpm add -D @luanthnh/eslint-config

# yarn
yarn add -D @luanthnh/eslint-config

# bun
bun add -d @luanthnh/eslint-config
```

## Usage

### 1. ESLint Configuration (`eslint.config.mjs`)

You can easily extend and **override** any rules from the base configuration.

```javascript
import { baseEslintConfig } from '@luanthnh/eslint-config';

const config = [
  ...baseEslintConfig,
  {
    // Customization & Overrides
    rules: {
      'no-console': 'warn', // Allow console with warning instead of error
      'react/prop-types': 'error', // Force prop-types if needed
      '@typescript-eslint/no-explicit-any': 'off', // Allow 'any' type
    },
    // You can also adjust file patterns or ignore certain paths
    ignores: ['node_modules/', '.next/', 'public/'],
  },
];

export default config;
```

### 2. Prettier Configuration (`prettier.config.js`)

You can also customize Prettier settings while keeping most defaults.

```javascript
import { basePrettierConfig } from '@luanthnh/eslint-config';

/** @type {import('prettier').Config} */
const config = {
  ...basePrettierConfig,
  // Overrides
  printWidth: 120, // Wider lines
  semi: false, // No semicolons
};

export default config;
```

## Features

- **Strict Rules**: High standards for code quality and consistency.
- **Auto-fixable**: Most rules are designed to be fixed automatically on save.
- **Kebab-case Enforcement**: Ensures consistent file naming.
- **Import Sorting**: Automatically organizes and cleans up your imports.
- **Tailwind CSS Support**: Specialized sorting for Tailwind classes.