Iris Component Library

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

Installation

npm install @codie-tech/iris

Usage

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

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

export default function MyComponent() {
  return (
    <Card>
      <Button>Click me</Button>
      <Dialog>
        <DialogContent>
          <Switch />
        </DialogContent>
      </Dialog>
    </Card>
  )
}

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

UI Components

• 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

Advanced Components

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

Utilities

• cn - className utility function

Styling

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

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