Components

nqui provides a comprehensive set of UI components for building modern web applications. All components are built with TypeScript, fully accessible, and support dark mode.

Essential Components

Button

Button — A versatile button component with enhanced styling, multiple variants, and sizes.

import { Button } from '@nqlib/nqui';

<Button variant="default">Click me</Button>

Features:

Multiple variants (default, destructive, outline, ghost, link, and more)
Different sizes (sm, default, lg, icon)
Enhanced styling with gradients and shadows
Full accessibility support

Card

Card — A flexible container component for displaying content in a structured format.

import { Card, CardHeader, CardTitle, CardContent } from '@nqlib/nqui';

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
  </CardHeader>
  <CardContent>
    Card content goes here
  </CardContent>
</Card>

Features:

Structured layout with header, content, and footer
Sub-components for flexible composition
Clean, modern design

Form Components

Components for building forms and handling user input.

Input - Text input field
Textarea - Multi-line text input
Select - Dropdown selection
Checkbox - Enhanced checkbox with animations
RadioGroup - Enhanced radio button group
Switch - Toggle switch
Label - Form field labels
Field - Form field wrapper with error handling
InputGroup - Input with addon elements
InputOTP - One-time password input
NativeSelect - Native HTML select
Slider - Range slider

Layout Components

Components for structuring your application layout.

Separator - Enhanced separator with variants
ScrollArea - Enhanced scrollable area with fade mask
Sidebar - Application sidebar component
Resizable - Resizable panel groups
AspectRatio - Maintain aspect ratios
Skeleton - Loading placeholders

Feedback Components

Components for displaying messages and feedback to users.

Alert - Alert messages
AlertDialog - Modal alert dialogs
Dialog - Modal dialogs
Drawer - Slide-out drawer
Sheet - Side sheet component
Popover - Popover content
Tooltip - Tooltip component
Toaster (Sonner) - Toast notifications
Progress - Progress indicators
Spinner - Loading spinner
Empty - Empty state component

Components for navigation and menus.

Tabs - Tab navigation
Breadcrumb - Breadcrumb navigation
NavigationMenu - Complex navigation menus
Menubar - Application menubar
DropdownMenu - Dropdown menus
ContextMenu - Right-click context menus
Command - Command palette
Combobox - Autocomplete combobox
Pagination - Pagination controls

Data Display Components

Components for displaying data and content.

Table - Data tables
Avatar - User avatars
Badge - Status badges
Calendar - Date picker calendar
Chart - Chart components
Carousel - Image/content carousel
Accordion - Collapsible content
Collapsible - Collapsible sections
Tabs - Tabbed content
HoverCard - Hover card component

Custom Components

Specialized components unique to nqui.

ColorPicker - Color selection component
Rating - Star rating component
TableOfContents - Table of contents generator
NquiLogo - Theme-aware nqui logo

Interactive Components

Components for user interactions.

ButtonGroup - Grouped buttons
Toggle - Toggle button
ToggleGroup - Group of toggle buttons
Slider - Range slider
Kbd - Keyboard key display
Item - List item component

Getting Started

To use any component, import it from @nqlib/nqui:

import { Button, Card } from '@nqlib/nqui';

Make sure you've completed the Setup Guide for your framework.

Component Categories

Components are organized by their primary use case:

Essential - Core components like Button and Card (✅ Documented)
Form - Input and form-related components
Layout - Structure and layout components
Feedback - Alerts, dialogs, and notifications
Navigation - Menus and navigation components
Data Display - Tables, charts, and data visualization
Custom - Specialized nqui components

Next Steps

Start with Button and Card
Installation and Setup if you haven't configured nqui yet