# Intelli UI

> Intelli UI by IntelliHelper is a Liquid Glass component library for React and Next.js. Copy-paste accessible Tailwind components you own in your codebase. Includes a CLI (`@intellihelper/cli`), shadcn-compatible registry, an official agent plugin (`IntelliHelper/agent-skills`), and an MCP server (`intellihelper-ui`) for AI coding agents. Open source. Open code. AI-ready.

Last updated: 2026-07-25
Contact: https://github.com/IntelliHelper/IntelliHelper-UI/issues
Author: Adeeb Mirza (IntelliHelper) — https://ui.intellihelper.in/about

## Overview

- [Home](https://ui.intellihelper.in/): Marketing landing for Liquid Glass React components, CLI, and agent tooling.
- [Components](https://ui.intellihelper.in/components): Full component catalog with live previews, search, and install commands.
- [Getting started](https://ui.intellihelper.in/getting-started): Install with the CLI, agent plugin, or MCP clients (Cursor, Claude, VS Code, Codex, OpenCode, Grok).
- [Guides](https://ui.intellihelper.in/guides): Liquid Glass tutorials, media kit, and shadcn comparison articles.
- [shadcn vs Intelli UI](https://ui.intellihelper.in/guides/shadcn-vs-intelli-ui): Comparison guide for teams evaluating shadcn alternatives.
- [React media components](https://ui.intellihelper.in/guides/react-media-components-image-video): Image preview, media player (CC + quality), and image editor tutorial.
- [About](https://ui.intellihelper.in/about): Maintainer, mission, and project status.
- [Agent plugin](https://ui.intellihelper.in/getting-started#plugin): One-step install for Claude Code, Grok, Codex, Gemini (skills + MCP + commands).
- [MCP](https://ui.intellihelper.in/getting-started#mcp): Tools-only setup for coding agents.
- [HTML sitemap](https://ui.intellihelper.in/sitemap): Human-readable index of every public page.
- [XML sitemap](https://ui.intellihelper.in/sitemap.xml): Machine-readable sitemap for crawlers.
- [RSS feed](https://ui.intellihelper.in/rss.xml): Component, guides, and docs feed.
- [Registry](https://ui.intellihelper.in/r/registry.json): JSON registry of installable components.
- [GitHub](https://github.com/IntelliHelper/IntelliHelper-UI): Source repository.
- [Agent skills](https://github.com/IntelliHelper/agent-skills): Official agent plugin repository.

## Installation

```bash
npx @intellihelper/cli@latest init
npx @intellihelper/cli@latest add button card dialog
npx @intellihelper/cli@latest mcp init --client cursor

# Agent plugin (skills + MCP + slash commands)
claude plugin marketplace add IntelliHelper/agent-skills
grok plugin install IntelliHelper/agent-skills --trust
```

## Categories

- [Glass System](https://ui.intellihelper.in/categories/glass-system): Liquid Glass primitives — chrome layers over expressive content
- [Actions](https://ui.intellihelper.in/categories/actions): Buttons and pressable controls
- [Surfaces](https://ui.intellihelper.in/categories/surfaces): Cards, tabs, layout primitives, and containers
- [Forms](https://ui.intellihelper.in/categories/forms): Inputs, selects, and date controls
- [Overlays](https://ui.intellihelper.in/categories/overlays): Dialogs, sheets, popovers, and tooltips
- [Navigation](https://ui.intellihelper.in/categories/navigation): Sidebars, pagination, and scroll helpers
- [Data](https://ui.intellihelper.in/categories/data): Tables, empty states, and loading placeholders
- [Feedback](https://ui.intellihelper.in/categories/feedback): Alerts, toasts, badges, spinners, and progress
- [Interactive](https://ui.intellihelper.in/categories/interactive): Accordions, sliders, toggles, and carousels
- [Content](https://ui.intellihelper.in/categories/content): Typography, markdown, and documentation tools
- [Media](https://ui.intellihelper.in/categories/media): Image lightbox, audio/video player with CC & quality, and canvas image editing

## Components

### Glass System

- [Background Picture](https://ui.intellihelper.in/components/background-picture-picker): Preset gradients, custom uploads, or reset to default mesh backgrounds.
- [Glass Content Card](https://ui.intellihelper.in/components/glass-content-card): Expressive saturated panels beneath floating chrome controls.
- [Glass Bar](https://ui.intellihelper.in/components/glass-bar): Neutral Liquid Glass capsule for grouped media controls.
- [Glass Icon Button](https://ui.intellihelper.in/components/glass-icon-button): Circular chrome buttons for icon-only actions.
- [Component Preview](https://ui.intellihelper.in/components/component-preview): Live preview with syntax-highlighted source and copy.

### Actions

- [Button](https://ui.intellihelper.in/components/button): Chrome and content layer variants with shapes and sizes.
- [Copy Button](https://ui.intellihelper.in/components/copy-button): Clipboard copy control with temporary copied feedback.
- [Theme Toggle](https://ui.intellihelper.in/components/theme-toggle): Light and dark mode switch for app chrome and docs.
- [Toggle](https://ui.intellihelper.in/components/toggle): Pressable glass toggle with spring scale feedback.
- [Toggle Group](https://ui.intellihelper.in/components/toggle-group): Capsule container for exclusive or multi-select toggles.

### Surfaces

- [Card](https://ui.intellihelper.in/components/card): Frosted glass panels for chrome and expressive content.
- [Tabs](https://ui.intellihelper.in/components/tabs): Glass capsule tabs with sliding chrome indicator.
- [Separator](https://ui.intellihelper.in/components/separator): Chrome dividers for horizontal and vertical layout.
- [Layout](https://ui.intellihelper.in/components/layout): Stack, Cluster, Grid, Flex, Center, Split, Container, Box, and Spacer — replace nested layout divs with named primitives.
- [Resizable](https://ui.intellihelper.in/components/resizable): Drag-to-resize panel groups with glass grip handle.
- [Scroll Area](https://ui.intellihelper.in/components/scroll-area): Custom scrollbar with optional chrome container.
- [Aspect Ratio](https://ui.intellihelper.in/components/aspect-ratio): Container that locks media to a consistent ratio.

### Forms

- [Input](https://ui.intellihelper.in/components/input): Translucent glass text fields with chrome and outline variants.
- [Label](https://ui.intellihelper.in/components/label): Accessible form labels with chrome, muted, and required styles.
- [Password Input](https://ui.intellihelper.in/components/password-input): Glass password field with show/hide toggle and field states.
- [OTP Input](https://ui.intellihelper.in/components/otp-input): One-time code slots with paste support and completion callback.
- [Textarea](https://ui.intellihelper.in/components/textarea): Multiline glass inputs with size and state variants.
- [Select](https://ui.intellihelper.in/components/select): Frosted dropdown with rise-in panel and animated checks.
- [Combobox](https://ui.intellihelper.in/components/combobox): Searchable select with filterable options and keyboard navigation.
- [File Upload](https://ui.intellihelper.in/components/file-upload): Drag-and-drop glass uploader with browse and selected file list.
- [Native Select](https://ui.intellihelper.in/components/native-select): Styled native HTML select with glass field styling.
- [Checkbox](https://ui.intellihelper.in/components/checkbox): Glass checkbox with animated check and indeterminate states.
- [Switch](https://ui.intellihelper.in/components/switch): Frosted toggle switch with spring-animated thumb.
- [Radio Group](https://ui.intellihelper.in/components/radio-group): Glass radio controls with primary indicator dot.
- [Calendar](https://ui.intellihelper.in/components/calendar): Frosted date picker with range and multi-select modes.
- [Multi Select](https://ui.intellihelper.in/components/multi-select): Searchable multi-value select with chips and keyboard navigation.
- [Prompt Input](https://ui.intellihelper.in/components/prompt-input): Composer with Enter-to-send and token estimate.
- [Prompt Suggestions](https://ui.intellihelper.in/components/prompt-suggestions): Quick-start prompt chips for empty chat states.
- [AI Model Selector](https://ui.intellihelper.in/components/ai-model-selector): Model picker with provider and description metadata.

### Overlays

- [Dialog](https://ui.intellihelper.in/components/dialog): Highly transparent modal with frosted overlay and rise-in content.
- [Alert Dialog](https://ui.intellihelper.in/components/alert-dialog): Confirmation modal for destructive and irreversible actions.
- [Sheet](https://ui.intellihelper.in/components/sheet): Edge slide-in glass panel with spring animation.
- [Popover](https://ui.intellihelper.in/components/popover): Click-triggered frosted panel for contextual actions.
- [Dropdown Menu](https://ui.intellihelper.in/components/dropdown-menu): Glass action menus with checkboxes, radios, and nested submenus.
- [Context Menu](https://ui.intellihelper.in/components/context-menu): Right-click glass menus for lists, tables, and canvases.
- [Hover Card](https://ui.intellihelper.in/components/hover-card): Rich hover previews with spring scale-in animation.
- [Tooltip](https://ui.intellihelper.in/components/tooltip): Frosted contextual hints with spring scale-in.
- [Command](https://ui.intellihelper.in/components/command): Filterable command palette with dialog mode and keyboard nav.
- [Floating Widget](https://ui.intellihelper.in/components/floating-widget): Chat-style corner bubble with a compact panel for feedback or messaging.

### Navigation

- [Sidebar](https://ui.intellihelper.in/components/sidebar): Collapsible glass sidebar with mobile sheet and icon rail.
- [Navigation Menu](https://ui.intellihelper.in/components/navigation-menu): Multi-level header navigation with glass content panels.
- [Breadcrumb](https://ui.intellihelper.in/components/breadcrumb): Hierarchical path navigation with separators and ellipsis.
- [Link](https://ui.intellihelper.in/components/link): Styled anchors with variants, sizes, external safety defaults, and asChild for Next.js.
- [Pagination](https://ui.intellihelper.in/components/pagination): Accessible page navigation with glass button links.
- [Scroll To Top](https://ui.intellihelper.in/components/scroll-to-top): Floating glass button that appears after scrolling.
- [Conversation Sidebar](https://ui.intellihelper.in/components/conversation-sidebar): Pinned conversation list with active state and new chat.

### Data

- [Event Calendar](https://ui.intellihelper.in/components/event-calendar): Month event grid with color chips, agenda sidebar, and day selection.
- [Table](https://ui.intellihelper.in/components/table): Glass-styled data table with chrome container and hover rows.
- [Empty](https://ui.intellihelper.in/components/empty): Compound empty-state layout with icon media slot.
- [Skeleton](https://ui.intellihelper.in/components/skeleton): Glass pulse loading placeholders.
- [Agent Card](https://ui.intellihelper.in/components/agent-card): Agent identity card with status and tools strip.
- [Tool Call Viewer](https://ui.intellihelper.in/components/tool-call-viewer): Expandable viewer for tool args, results, and errors.
- [MCP Server Card](https://ui.intellihelper.in/components/mcp-server-card): MCP server status with tools and resources counts.

### Feedback

- [Alert](https://ui.intellihelper.in/components/alert): Status alerts with semantic tints and optional icons.
- [Toast](https://ui.intellihelper.in/components/toast): Transient Liquid Glass notifications with imperative API and stacking.
- [Avatar](https://ui.intellihelper.in/components/avatar): Glass avatars with image, fallback initials, and stacked groups.
- [Badge](https://ui.intellihelper.in/components/badge): Glass pill badges with scale-in mount animation.
- [Kbd](https://ui.intellihelper.in/components/kbd): Keyboard key labels for shortcuts and hints.
- [Spinner](https://ui.intellihelper.in/components/spinner): Loading spinner with arc, ring, dots, bars, pulse, and apple types.
- [Progress](https://ui.intellihelper.in/components/progress): Frosted progress bar with spring-animated fill.
- [Notification Center](https://ui.intellihelper.in/components/notification-center): Inbox-style notifications with unread, mark-read, and dismiss.
- [Typing Indicator](https://ui.intellihelper.in/components/typing-indicator): Animated dots while the assistant composes a reply.
- [Thinking Animation](https://ui.intellihelper.in/components/thinking-animation): Thinking/processing status for agent and chat UIs.
- [Token Counter](https://ui.intellihelper.in/components/token-counter): Token usage badge with estimate and limit states.

### Interactive

- [Accordion](https://ui.intellihelper.in/components/accordion): Expandable chrome panels with rotating chevron.
- [Collapsible](https://ui.intellihelper.in/components/collapsible): Standalone expand/collapse panel and file-tree layout.
- [Slider](https://ui.intellihelper.in/components/slider): Frosted range slider with spring-animated thumb.
- [Carousel](https://ui.intellihelper.in/components/carousel): Embla-powered slides with glass viewport chrome.
- [Stepper](https://ui.intellihelper.in/components/stepper): Ordered steps with completed, active, and upcoming states.

### Content

- [Typography](https://ui.intellihelper.in/components/typography): Semantic text primitives for headings, body, and code.
- [Markdown Viewer](https://ui.intellihelper.in/components/markdown-viewer): Glass-styled markdown with Shiki syntax highlighting.
- [Markdown Editor](https://ui.intellihelper.in/components/markdown-editor): Rich-text and markdown editing with split preview.
- [Code Viewer](https://ui.intellihelper.in/components/code-viewer): Glass code surface with line numbers and copy.
- [Terminal Block](https://ui.intellihelper.in/components/terminal-block): Terminal transcript with prompts and output lines.
- [JSON Viewer](https://ui.intellihelper.in/components/json-viewer): Pretty-print and validate JSON with line numbers.
- [AI Chat](https://ui.intellihelper.in/components/ai-chat): Composable chat shell with user and assistant bubbles.
- [Streaming Text](https://ui.intellihelper.in/components/streaming-text): Progressive reveal for streaming model responses.
- [Reasoning Block](https://ui.intellihelper.in/components/reasoning-block): Collapsible chain-of-thought panel for AI responses.
- [Citation Card](https://ui.intellihelper.in/components/citation-card): Source citation with index, excerpt, and optional link.

### Media

- [Image Preview](https://ui.intellihelper.in/components/image-preview): Lightbox gallery with zoom, pan, captions, and download.
- [Media Player](https://ui.intellihelper.in/components/media-player): Glass audio/video player with CC, quality selector, seek, and volume.
- [Image Editor](https://ui.intellihelper.in/components/image-editor): Crop, rotate, flip, filters, and canvas export for images.

## Optional

- Prefer `llms-full.txt` style depth: each component page includes install command, description, category, and live demo.
- Agent plugin: `IntelliHelper/agent-skills` (plugin id `intellihelper-ui`)
- MCP server name: `intellihelper-ui`
- Primary keywords: liquid glass, glass morphism, React UI, Next.js components, Tailwind, shadcn alternative, agent skills, MCP, media player, image lightbox, image editor
- Media kit: [Image Preview](https://ui.intellihelper.in/components/image-preview), [Media Player](https://ui.intellihelper.in/components/media-player), [Image Editor](https://ui.intellihelper.in/components/image-editor) under [Media](https://ui.intellihelper.in/categories/media)