Components and Visuals Codie Library
npm install @codie-tech/irisA React component library with automatic "use client" handling for Next.js applications.
``bash`
npm install @codie-tech/iris
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 (
)
}
`
- ✅ 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
- 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 functionStyling
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.
- Total bundle: ~74KB (gzipped: ~12KB)
- CSS: ~5KB
- Tree-shakeable: Only bundle what you use
ISC