Ikon Component Library

A comprehensive component library built with TypeScript, featuring shadcn/ui components and custom components for building modern web applications in Next.js.

📦 Installation

npm install @ankit-paul-keross/ikon-component-lib

🚀 Quick Start with Theming

In globals.css add:

@import "@ankit-paul-keross/ikon-component-lib/styles.css";

In layout.tsx add:

import { ThemeProvider, ThemeToggleBtn } from "@ankit-paul-keross/ikon-component-lib";

<ThemeProvider
    attribute="class"
    defaultTheme="dark"
    themes={['light', 'dark', 'keross']}
    enableSystem
    disableTransitionOnChange
>
    <div className="flex flex-row justify-end sticky top-0 z-50">
        <ThemeToggleBtn />
    </div>
    {children}
</ThemeProvider>

The library supports light, dark themes, and a custom keross theme out of the box. Use the ThemeToggleBtn component to switch between themes.

📚 Components

Shadcn UI Components

Base UI components built on top of Radix UI primitives:

• Accordion - Vertically stacked set of interactive headings
• Alert & Alert Dialog - Callout messages and modal dialogs
• Avatar - User profile images with fallback
• Badge - Small status indicators
• Button - Clickable button elements with variants
• Calendar - Date picker calendar interface
• Card - Container for content with header and footer
• Checkbox - Binary selection control
• Command - Command palette interface
• Date Input & Date Range Picker - Date selection inputs
• Dialog - Modal dialog windows
• Dropdown Menu - Contextual menu component
• Hover Card - Contextual card on hover
• Input & Textarea - Form input fields
• Label - Form field labels
• Navigation Menu - Horizontal navigation component
• Popover - Floating content container
• Progress - Progress indicator bar
• Radio Group - Single selection from multiple options
• Scroll Area - Custom scrollable container
• Select - Dropdown selection input
• Separator - Visual divider line
• Sheet - Side panel/drawer component
• Sidebar - Application sidebar navigation
• Skeleton - Loading placeholder
• Slider - Range input slider
• Sonner - Toast notification system
• Switch - Toggle switch control
• Table - Data table component
• Tabs - Tabbed interface
• Tooltip - Contextual hint on hover
• Workflow - Workflow visualization component

Ikon Custom Components

Custom-built components for enhanced functionality:

• Action Menu - Quick action menu dropdown
• Alert Dialog - Custom alert modal
• App Sidebar - Application navigation sidebar
• Buttons - Extended button variants
• Combobox Input - Searchable select input
• Data Table - Advanced data grid with sorting and filtering
• E-Chart - Chart visualization component
• File Input - File upload input with preview
• Glowing Effect - Animated glow effect wrapper
• Icon - Icon component library
• Loading Spinner - Loading state indicator
• Multi Combobox - Multi-select combobox
• No Data - Empty state placeholder
• Page Wrapper - Page layout wrapper
• Password Strength Meter - Password strength indicator
• Phone Input - International phone number input
• Resource Spreadsheet - Spreadsheet-like data grid
• Search Input - Search input with suggestions
• Sheet - Custom sheet/drawer component
• Simple Widget - Dashboard widget container
• Tabs - Enhanced tabs component
• Theme Toggle Btn - Dark/light mode toggle
• Title Progress - Progress bar with title
• Tooltip - Custom tooltip component
• Two-Level Dropdown - Nested dropdown menu
• Widgets - Collection of dashboard widgets```

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built with React
• UI primitives from Radix UI
• Styling with Tailwind CSS
• Inspired by shadcn/ui

Made with ❤️ by Ankit Paul