Iris Component Library

A React component library with automatic "use client" handling for Next.js applications.

Installation

``bash
npm install @codie-tech/iris
`

Usage

Import components directly and they'll automatically work in your Next.js app:

`tsx
import { Button, Dialog, Card, Switch } from '@codie-tech/iris'
import '@codie-tech/iris/css'

export default function MyComponent() {
return (

Click me










)
}
`

Key Features

- ✅ Automatic "use client" handling - No need to add client directives manually
- ✅ Single entry point - Import everything from @codie-tech/iris
- ✅ TypeScript support - Full type definitions included
- ✅ Next.js optimized - Works seamlessly with Next.js App Router

Available Components

$3


- Alert - Display alert messages
- AlertDialog - Modal alert dialogs
- Avatar - User profile pictures
- Badge - Status indicators
- Button - Interactive buttons
- ButtonGroup - Grouped buttons
- Calendar - Date picker calendar
- Card - Content containers
- Dialog - Modal dialogs
- DropdownMenu - Dropdown menus
- Empty - Empty state displays
- Field - Form field containers
- Input - Text input fields
- InputGroup - Grouped inputs
- Item - List items
- Label - Form labels
- Pagination - Page navigation
- Popover - Floating content
- Progress - Progress bars
- Select - Select dropdowns
- Separator - Visual dividers
- Skeleton - Loading placeholders
- Spinner - Loading indicators
- Switch - Toggle switches
- Table - Data tables
- Tabs - Tabbed content
- Textarea - Multi-line text input

$3

- DatePicker - Date selection component
- Typography - Text styling components
- Sonner - Toast notifications

$3

- cn - className utility function

Styling

Import the CSS file in your root layout or main component:

`tsx
import '@codie-tech/iris/css'
``

The components use Tailwind CSS classes and are designed to work with your existing Tailwind setup.

Bundle Size

- Total bundle: ~74KB (gzipped: ~12KB)
- CSS: ~5KB
- Tree-shakeable: Only bundle what you use

License

ISC