# All Components This file provides a comprehensive list of all components in the component library. --- ## 🎯 Quick Reference for AI Planning When planning UIs, prioritize these rich, feature-complete components: ### Layout & Structure - **AppShell, Nav, ScreenWrapper, TabBar** - Complete app chrome with navigation - **ScreenTitle** - Rich page headers with 4 variants (Simple, Image, Cover, Profile) ### Rich Data Components - **DataTable** - Full-featured tables with sorting, filtering, pagination, row selection - **FilterToolbar** - Advanced filtering with 3 variants (horizontal, **vertical** ⭐, compact) - **Kanban** - Drag-and-drop task boards for workflow management - **Calendar** - Event scheduling with month/week/day/agenda views ### Rich Content & Visualization - **Charts** - 11 types: Area, Bar, Line, Pie, Radar, Scatter, Funnel, Treemap, Sankey, etc. - **Map** - Interactive maps with markers, routes, clustering (no API key needed) - **ImageGallery** - Main image + thumbnail navigation - **Carousel** - Multi-slide content with navigation and autoplay ### Smart Patterns - **List** - Auto-pagination (20 items/page), interactive or navigation lists - **Grid** - Responsive layout with loading states (2-3-4 column responsive defaults) - **Command** - Use for ALL menus, command palettes, dropdowns (keyboard-friendly) --- ## Layout & Chrome Components ### AppShell, Nav, ScreenWrapper, TabBar **Import**: `import { AppShell, Nav, ScreenWrapper, TabBar } from '@glide/glide-ui/chrome';` **Props**: Nav: `title, items, logo?, className?, variant?, collapsed?, profile?, profileActions?, onItemClick?, onToggleCollapse?, pageTitle?` | TabBar: `items, className?` | ScreenWrapper: `className?` | AppShell: `children` **Description**: Core chrome/structure components for the application shell: - **AppShell**: Simple wrapper div for app chrome components. Used to contain Nav, ScreenWrapper, and TabBar components together. - **ScreenWrapper**: Core wrapper container for app screens providing consistent layout with full viewport height, responsive padding, and maximum width constraints. Uses `--page-max-width` CSS variable (default: 88rem/1408px) which can be customized per theme. Must be used as the main wrapper for all page content. - **Nav**: Navigation component with two variants: `top` (sticky top bar) and `sidebar` (fixed left sidebar with collapsible state). Supports optional logo, user profile display with avatar/name/email, profile action callbacks (onProfileClick, onSettingsClick, onAboutClick, onLogoutClick), item click handlers, and a `pageTitle` for mobile-specific display. Both variants include mobile responsive behavior. - **TabBar**: Mobile bottom navigation bar with fixed positioning. Shows only on mobile with icon and label for each navigation item. Provides platform-appropriate navigation for touch devices. **Documentation**: [Chrome Components README](./chrome/README.md) ### ScreenTitle **Import**: `import { ScreenTitle } from '@glide/glide-ui/screen-title';` **Props**: `variant, title, subtitle?, image?, coverImage?, size?, controls?, className?` **Description**: **DO NOT use with FilterToolbar on the same page.** Use ScreenTitle for main page headers (e.g., "Dashboard", "User Profile"). For collection titles above data lists, use FilterToolbar instead. A versatile screen title component with four distinct styles (Simple, Image, Cover, Profile) for creating rich page headers with optional images, actions, and metadata. The `title` prop requires a string and gets proper h1 styling automatically. The optional `subtitle` prop should **only be used for dynamic content** on detail/item pages (e.g., user role on profile page, product specs on product page, team stats on team page) - do NOT use for static UI text or generic page descriptions. Generic pages like "Dashboard" or "Settings" should NOT have subtitles. When used, `subtitle` accepts either a string (gets default `text-subtle` styling) or ReactNode (for full styling control over dynamic metadata). Features responsive layouts that adapt between mobile and desktop, support for control actions, flexible image display options, and full accessibility. Perfect for user profiles, product details, team pages, and any detail screen that shows specific information about an item. --- ## Rich Data & Collection Components ### DataTable **Import**: `import { DataTable } from '@glide/glide-ui/table';` **Props**: `columns, data, loading?, skeletonRows?, emptyMessage?, enableSorting?, manualSorting?, onSortingChange?, enableFiltering?, enableColumnFilters?, globalFilter?, onGlobalFilterChange?, enablePagination?, manualPagination?, pageCount?, pagination?, onPaginationChange?, enableRowSelection?, rowSelection?, onRowSelectionChange?, getRowCanSelect?, onRowClick?, enableColumnVisibility?, enableColumnResizing?, enableColumnOrdering?, className?, stickyHeader?, ariaLabel?` **Description**: A comprehensive data table component built on TanStack Table (React Table v8) with full-featured functionality. Supports sorting, filtering, pagination, row selection, column visibility controls, loading states, and responsive design. **Row clicking is a common interaction pattern** - use `onRowClick` to handle row clicks for navigation or actions. When provided, rows automatically show hover states and cursor pointer. Use this component for all data table needs - the internal table primitives are not exposed. Features debounced search, skeleton loading, keyboard navigation, and full accessibility support. **IMPORTANT**: DataTable handles pagination internally via `enablePagination` prop - do NOT use the standalone Pagination component with DataTable. ### FilterToolbar **Import**: `import { FilterToolbar, FilterToolbarTitle, FilterToolbarSearch, FilterGroup, Filter, FilterToolbarButtons, FilterToolbarButton } from '@glide/glide-ui/filter-toolbar';` **Props**: FilterToolbar: `variant?` ("horizontal" | "vertical" | "compact") | FilterToolbarTitle: `count?` | FilterToolbarSearch: `onSearch?, debounceMs?` | Filter: `label, options, value, onChange, multiple?, displayVariant?, maxVisibleOptions?, defaultOpen?` | FilterGroup: `activeCount?, onClearAll?` | FilterToolbarButton: `priority?, leftIcon?, rightIcon?` **Description**: **CRITICAL: FilterToolbar has THREE variants - actively consider VERTICAL and COMPACT for better UX.** (1) **HORIZONTAL**: Only for 1-3 filters on simple lists. Basic inline layout. (2) **VERTICAL** (RECOMMENDED for complex filtering): Use for 4+ filters, Dialog sheets, or when you want superior UX with collapsible sections, toggle buttons, pill selectors, and "show more" functionality. Provides the best user experience for complex filtering. Pairs perfectly with Dialog variant="sheet" for professional slide-in filter panels. (3) **COMPACT** (RECOMMENDED for 4+ filters): Use when you have 4+ filters or space is limited. Much cleaner than horizontal with many filters - all filters in elegant single dropdown with active count badge. **Decision rules:** 4+ filters → VERTICAL or COMPACT (never horizontal). Dialog sheet → VERTICAL. Need toggle/pills → VERTICAL. Space limited → COMPACT. Only 1-3 simple filters → horizontal. Features debounced search, multi-select, and action buttons. Perfect for product listings, data tables, employee directories, and any collection with search/filter/actions. For main page headers without filtering, use ScreenTitle instead. ### Kanban **Import**: `import { KanbanBoard, KanbanCard, KanbanCards, KanbanHeader, KanbanAddButton } from '@glide/glide-ui/kanban';` **Props**: KanbanBoard: `children, className?` | KanbanCard: `id, children, ...item props` | KanbanCards: `columnId, items` **Description**: A drag-and-drop Kanban board component for visual task management and workflow organization. Features column-based layout, card dragging between columns, customizable card rendering, and full keyboard navigation. Perfect for project management, task tracking, workflow visualization, and agile development boards. ### Calendar **Import**: `import { Calendar } from '@glide/glide-ui/calendar';` **Description**: A comprehensive calendar component for displaying and managing events with multiple view modes (month, week, day, agenda). Built on react-big-calendar with full TypeScript support, event management, customizable styling, and responsive design. Perfect for scheduling applications, event planning, resource booking, and any application requiring calendar functionality with event display. ### List **Import**: `import { List, ListItem } from '@glide/glide-ui/list';` **Props**: List: `pageSize?` | ListItem: `href?, onClick?, asChild?, disabled?` **Description**: An interactive-first list component that automatically detects and applies appropriate behavior based on props. With `href` it becomes a navigation list using Link, with `onClick` it renders as actionable buttons. Features automatic dividers, hover states, built-in pagination (enabled by default with 20 items per page), and semantic HTML structure. Pagination is on by default - set `pageSize={0}` to disable and show all items. List handles pagination internally similar to DataTable. No styling needed for common cases. ### Grid **Import**: `import { Grid, GridItem } from '@glide/glide-ui/grid';` **Props**: Grid: `loading?, cols?, skeletonCount?` | GridItem: `href?, onClick?, asChild?, hover?, className?` **Description**: A minimal grid layout component with responsive defaults (2 columns mobile, 3 columns tablet, 4 columns desktop) and automatic gap sizing (8px mobile, 16px desktop). **Important**: GridItem adds NO visual styling - it's purely a layout wrapper. Add your own card styles only when needed. Includes built-in loading state with skeleton placeholders. ### Collection Toolbar (Pattern) **Import**: `import { Input } from '@glide/glide-ui/input'; import { Select } from '@glide/glide-ui/select'; import { Button } from '@glide/glide-ui/button';` **Props**: N/A - This is a composition pattern **Description**: Standard pattern for collection toolbars above List, Grid, or DataTable components. Provides search input on the left, filters and actions on the right. Structure: `
` with search (`Input type="search"`) and action buttons (`Select`, `Button`). Place above collection component for consistent collection management. ### Pagination **Import**: `import { Pagination } from '@glide/glide-ui/pagination';` **Props**: `currentPage, totalPages, onPageChange, variant?, showPageInfo?` **Description**: A minimal and clean pagination component designed to work below collection components (like lists and grids). Provides intuitive navigation through paginated content with both numbered and simple previous/next variants. Features responsive design, smart ellipsis handling, and full accessibility support. **IMPORTANT**: Do NOT use this component with DataTable or List - they both handle pagination internally. --- ## Rich Content & Visualization Components ### Charts **Import**: `import { AreaChart, BarChart, LineChart, ComposedChart, PieChart, RadarChart, RadialBarChart, ScatterChart, FunnelChart, Treemap, SankeyChart } from '@glide/glide-ui/charts';` **Props**: `data, width?, height?, aspect?, className?, ...chart-specific props` **Description**: A comprehensive collection of responsive chart components built with Recharts. All charts include a built-in SSR-safe `ResponsiveContainer` with a 200px minimum height fallback. Charts default to `height="100%"` (fill parent container) — pass an explicit pixel height (e.g. `height={400}`) or use `aspect` (e.g. `aspect={16/9}`, uses CSS `aspect-ratio`) to control sizing. Supports light/dark mode through the existing theme system. Includes 11 chart types: Area, Bar, Line, Composed, Pie, Radar, RadialBar, Scatter, Funnel, Treemap, and Sankey charts. ### Map **Import**: `import { Map, MapMarker, MarkerContent, MarkerPopup, MarkerTooltip, MarkerLabel, MapPopup, MapControls, MapRoute, MapClusterLayer } from '@glide/glide-ui/map';` **Props**: Map: `center, zoom, styles?, className?` | MapMarker: `longitude, latitude, draggable?, onClick?, onDragEnd?` | MapControls: `position?, showZoom?, showCompass?, showLocate?, showFullscreen?, onLocate?` | MapRoute: `coordinates, color?, width?, opacity?, dashArray?, onClick?` | MapClusterLayer: `data, clusterMaxZoom?, clusterRadius?, pointColor?, onPointClick?, onClusterClick?` **Description**: A powerful interactive map component built with MapLibre GL using a composition-based API. **No API key required** - uses free Carto basemaps. Features automatic theme switching (light/dark), composition pattern for markers/popups/tooltips, built-in controls (zoom/compass/locate/fullscreen), route drawing, automatic clustering for large datasets, draggable markers, responsive design with ResizeObserver, and full SSR compatibility. **IMPORTANT: Container sizing** - Map fills its parent (`w-full h-full`) with 400px min-height fallback. Always wrap in container with explicit height: `
`. **IMPORTANT: Coordinate format** - Always use `[longitude, latitude]` format, NOT `[lat, lng]`. Perfect for store locators, delivery tracking, location pickers, route planning, geographic data visualization, and any map-based feature. Use composition pattern for all features - nest MapMarker, MapControls, MapRoute as children of Map component. **Documentation**: See `.claude/skills/map.md` for comprehensive usage guide and examples ### ImageGallery **Import**: `import { ImageGallery } from '@glide/glide-ui/image-gallery';` **Props**: `images, selectedIndex?, defaultSelectedIndex?, onImageChange?, onImageError?, aspectRatio?, thumbnailsPerView?, imageFallback?, disabled?, className?` **Description**: A streamlined and accessible image gallery component with main image display and thumbnail navigation. Features controlled/uncontrolled modes, configurable aspect ratios, adjustable number of visible thumbnails (defaults to 6), keyboard navigation (arrow keys), touch-friendly interactions, automatic loading states, error handling, and full accessibility support. Built with the Image component for reliable rendering. Perfect for product galleries, photo portfolios, real estate listings, and any scenario requiring interactive image browsing with thumbnail selection. ### Carousel **Import**: `import { Carousel, CarouselSlide } from '@glide/glide-ui/carousel';` **Props**: `slideIndex?, onSlideChange?, showArrows?, showDots?, loop?, autoplay?, duration?, transitionDuration?, height?, slidesToShow?, slideGap?, className?` **Description**: A flexible and accessible carousel component inspired by Mantine, supporting both images and HTML content. Features navigation controls, indicators/dots, keyboard navigation, touch/mouse dragging, autoplay with pause on hover, multiple slides display, customizable gaps and transitions, responsive design, and full accessibility support. Perfect for image galleries, product showcases, testimonials, hero banners, content sliders, and any scrollable content presentation. Built with compound component pattern using Carousel and CarouselSlide for maximum flexibility. ### AudioPlayer **Import**: `import { AudioPlayer } from '@glide/glide-ui/audio-player';` **Description**: A comprehensive and accessible audio player component with play/pause controls, seeking, volume control, playback rate adjustment, and keyboard shortcuts. Features three variants (default, compact, minimal), metadata display with cover art, loading/buffering states, and both controlled/uncontrolled modes. Built with full keyboard navigation and screen reader support for playing audio files, podcasts, and music. ### Image **Import**: `import { Image } from '@glide/glide-ui/image';` **Props**: `src?, alt?, fallback?, placeholder?, showLoading?, loadingContent?, onError?, onLoad?, containerClassName?, ...HTML img attributes` **Description**: A robust image component with comprehensive fallback handling and loading states. Displays placeholder content when no src is provided, shows fallback content when image fails to load, and supports custom loading states. Built with accessibility in mind, providing proper ARIA attributes and semantic HTML structure. Features graceful error handling, custom content slots for all states, and full support for standard img element properties. Perfect for user avatars, product images, gallery displays, and any scenario requiring reliable image rendering with fallbacks. --- ## Form Components ### Input **Import**: `import { Input } from '@glide/glide-ui/input';` **Props**: `label?, description?, error?, hint?, ...HTML input attributes` **Description**: A fully accessible form input component with optional labels, descriptions, hints, error states, and various input types. ### Textarea **Import**: `import { Textarea } from '@glide/glide-ui/textarea';` **Props**: `label?, description?, ...HTML textarea attributes` **Description**: A customizable multi-line text input component with automatic height adjustment and consistent styling. Features modern CSS auto-sizing, responsive text sizing, optional label and description for consistent form field styling, and comprehensive form integration support. ### Select **Import**: `import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@glide/glide-ui/select';` **Props**: Select: `label?, description?, className?` | SelectTrigger: `size?, variant?, label?, description?, required?`, plus various Radix UI Select props **Description**: A comprehensive and accessible select dropdown component built on Radix UI primitives with full keyboard navigation, screen reader support, and customizable styling. Supports multiple sizes, grouping, separators, and scrollable content with smart positioning. Features optional label and description on SelectTrigger for consistent form field styling. ### ComboBox **Import**: `import { Combobox, ComboboxTrigger, ComboboxContent, ComboboxInput, ComboboxList, ComboboxEmpty, ComboboxGroup, ComboboxItem, ComboboxSeparator, ComboboxCreateNew } from '@glide/glide-ui/combobox';` **Props**: `data, type, label?, description?, defaultValue?, value?, onValueChange?, open?, onOpenChange?` **Description**: A flexible and accessible combobox (autocomplete select) component with searchable dropdown functionality, grouping support, and custom item creation. Built with Radix UI primitives for full keyboard navigation and screen reader support. Features optional label and description for consistent form field styling. ### DatePicker **Import**: `import { DatePicker } from '@glide/glide-ui/date-picker';` **Props**: `label?, description?, value?, onChange?, placeholder?, showTime?, showDate?, is24Hour?, className?` **Description**: A unified date picker component that supports date-only, date-time, and time-only selection modes. Features optional label and description for consistent form field styling, optional time selection via `showTime` prop, optional date selection via `showDate` prop, dual time format support (12-hour with AM/PM and 24-hour via `is24Hour`), controlled component behavior, input-styled appearance, and comprehensive accessibility. Use for simple date selection, complete date-time input, or time-only selection. Perfect for scheduling, event planning, appointment booking, daily schedules, opening hours, and any application requiring date, time, or date-time selection. ### CalendarPicker **Import**: `import { CalendarPicker, CalendarDayButton } from '@glide/glide-ui/calendar-picker';` **Description**: A flexible and fully accessible calendar picker component built on react-day-picker with comprehensive date selection capabilities. Supports single date, multiple dates, and date range selection with customizable styling, keyboard navigation, month/year dropdowns, and full internationalization support. ### NumberInput **Import**: `import { NumberInput } from '@glide/glide-ui/number-input';` **Props**: `label?, description?, min?, max?, step?, ...Input props` **Description**: A specialized input component for numeric values that extends the base Input component with number-specific attributes (min, max, step) and validation. Provides HTML5 number input features including spinner controls, keyboard navigation, built-in validation, and optional label and description for consistent form field styling. ### Checkbox **Import**: `import { Checkbox } from '@glide/glide-ui/checkbox';` **Props**: `label?, description?, checked?, defaultChecked?, onCheckedChange?, disabled?` **Description**: A fully accessible checkbox component built on Radix UI primitives with support for three states (checked, unchecked, indeterminate). Features optional label and description, proper keyboard navigation, screen reader support, and form integration capabilities. **Best Practice**: Always use the built-in `label` prop instead of wrapping the component with an external `