shadcn-glass-ui
yhooi2.github.ioFreerepo only
Glassmorphism UI Components for shadcn React
Items
76
2026-08-03Every entry in its own registry.json, counted last night.Free to install
76
2026-08-03Item endpoints that returned source without credentials.Behind a key
0
2026-08-03Item endpoints that answered 401.Last push
7 months ago
33 stars. Both figures are GitHub's about this repository, not ones this index measured.Components
Search withinFreeits item endpoint answered without a keyPaidits item endpoint answered 401Unverifiedit serves no item endpoint we could ask
| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Alert Glassalert-glass | Glass-themed alert with: | Components | Free | no deps | |
| Animated Background Glassanimated-background-glass | Animated gradient background with floating orbs for glassmorphism UIs. * Provides an immersive atmosphere with theme-aware styling. * * ## Features | Components | Free | no deps | |
| Avatar Glassavatar-glass | Glass-themed avatar with: | Components | Free | no deps | |
| Badge Glassbadge-glass | Glass-themed badge with: | Components | Free | no deps | |
| Base Progress Glassbase-progress-glass | Base progress bar component used as foundation for: | Components | Free | no deps | |
| Button Glassbutton-glass | Glass-themed button with: | Components | Free | no deps | |
| Card Glasscard-glass | CardGlass Compound Component | Components | Free | no deps | |
| Checkbox Glasscheckbox-glass | Glass-themed checkbox built on Radix UI primitives with: | Components | Free | no deps | |
| Circular Progress Glasscircular-progress-glass | SVG-based circular progress indicator with gradient colors and glow effects. * Supports both determinate (0-100%) and indeterminate (spinner) variants. * * ## Features | Components | Free | no deps | |
| Combobox Glasscombobox-glass | Glass-themed combobox (searchable select) combining autocomplete and dropdown functionality. * Built on Radix UI Popover and cmdk for robust keyboard navigation and filtering. * * ## Features | Components | Free | no deps | |
| Dropdown Glassdropdown-glass | Glass-themed dropdown menu with simple and compound APIs for maximum flexibility. * Wrapper around DropdownMenuGlass for quick menu creation. * * ## Features | Components | Free | no deps | |
| Dropdown Menu Glassdropdown-menu-glass | DropdownMenuGlass - Compound Component | Components | Free | no deps | |
| Expandable Header Glassexpandable-header-glass | Collapsible section header with animated chevron for accordion-style interfaces. * Provides accessible expand/collapse controls with theme-aware styling. * * ## Features | Components | Free | no deps | |
| Flag Alert Glassflag-alert-glass | Flag Alert Glass component with glass effects | Components | Free | no deps | |
| Glass Cardglass-card | Glass-themed container with backdrop blur, glow effects, and hover animations. * Provides a foundational card component for glassmorphism UIs. * * ## Features | Components | Free | no deps | |
| Hover Card Glasshover-card-glass | Hover-triggered floating glass-themed container for rich content previews. * Unlike PopoverGlass (click-triggered), HoverCardGlass opens on hover after a configurable delay. * * ## Features | Components | Free | no deps | |
| Icon Button Glassicon-button-glass | Icon-only button with glassmorphism styling and touch-friendly sizing. * Perfect for toolbar actions, header controls, and compact interfaces. * * ## Features | Components | Free | no deps | |
| Input Glassinput-glass | Glass-themed input with: | Components | Free | no deps | |
| Insight Card Glassinsight-card-glass | Versatile insight display component with emoji icons, text, and optional interactivity. * Supports 7 semantic variants with distinct styling and multiple display modes for dashboards, * analytics, and feedback interfaces. * * ## Features | Components | Free | no deps | |
| Language Bar Glasslanguage-bar-glass | Custom color for the language segment. | Components | Free | no deps | |
| Modal Glassmodal-glass | ModalGlass Component (Radix UI Dialog-based) | Components | Free | no deps | |
| Notification Glassnotification-glass | Glass-themed toast notification with variant-based styling, icons, and dismiss functionality. * Provides visual feedback for user actions and system events. * * ## Features | Components | Free | no deps | |
| Popover Glasspopover-glass | Floating glass-themed container for tooltips, dropdowns, and contextual overlays. * Provides compound and legacy APIs for maximum flexibility. * * ## Features | Components | Free | no deps | |
| Profile Avatar Glassprofile-avatar-glass | Profile-specific size classes (larger than standard AvatarGlass) | Components | Free | no deps | |
| Progress Glassprogress-glass | Glass-themed progress bar with 100% shadcn/ui Progress API compatibility. * * ## shadcn/ui Compatibility * * This component is **fully compatible** with shadcn/ui Progress API: | Components | Free | no deps | |
| Rainbow Progress Glassrainbow-progress-glass | Rainbow Progress Glass component with glass effects | Components | Free | no deps | |
| Scroll Area Glassscroll-area-glass | Custom scrollable container with glass-themed scrollbars. * Built on @radix-ui/react-scroll-area for cross-browser consistency. * * ## Features | Components | Free | no deps | |
| Search Box Glasssearch-box-glass | Search input with glassmorphism styling and integrated submit button. * Provides a cohesive search experience with visual feedback and keyboard support. * * ## Features | Components | Free | no deps | |
| Segmented Control Glasssegmented-control-glass | Segmented Control Glass component with glass effects | Components | Free | no deps | |
| Select Glassselect-glass | Glass-themed select dropdown with compound component API for flexible composition. * Built on @radix-ui/react-select for accessibility, keyboard navigation, and robust selection behavior. * * ## Features | Components | Free | no deps | |
| Separator Glassseparator-glass | A glass-themed separator/divider component for visual content separation. * Based on @radix-ui/react-separator with glassmorphism styling. * * Issue #27: Feature request for standalone SeparatorGlass * * @example * ```tsx * // Horizontal separator (default) * <SeparatorGlass /> * * // Vertical separator * <SeparatorGlass orientation="vertical" className="h-4" /> * * // With glow effect * <SeparatorGlass glow /> * * // Decorative (hidden from screen readers) * <SeparatorGlass decorative /> * ``` | Components | Free | no deps | |
| Sheet Glasssheet-glass | Glass-themed sheet/drawer component with full shadcn/ui Sheet API compatibility. * Slides in from top, right, bottom, or left edges with backdrop overlay and blur effects. * * ## Features | Components | Free | no deps | |
| Sidebar Contextsidebar-context | SidebarGlass Context | Components | Free | no deps | |
| Sidebar Glasssidebar-glass | SidebarGlass Core Components | Components | Free | no deps | |
| Sidebar Menusidebar-menu | SidebarGlass Menu Components | Components | Free | no deps | |
| Skeleton Glassskeleton-glass | Glass-themed loading skeleton with: | Components | Free | no deps | |
| Slider Glassslider-glass | Glass-themed range slider built on Radix UI with shadcn/ui compatible API: | Components | Free | no deps | |
| Sort Dropdown Glasssort-dropdown-glass | Atomic sorting control built on DropdownMenuGlass primitives for data table and list sorting. * Provides intuitive sort field selection with visual indicators for active sort and direction. * * ## Features | Components | Free | no deps | |
| Sparkline Glasssparkline-glass | Sparkline Glass component with glass effects | Components | Free | no deps | |
| Stat Item Glassstat-item-glass | Compact statistic display component with icon, value, and label for profile cards and dashboards. * Designed for inline metrics with automatic value formatting and flexible layouts. * * ## Features | Components | Free | no deps | |
| Status Indicator Glassstatus-indicator-glass | Status Indicator Glass component with glass effects | Components | Free | no deps | |
| Stepper Glassstepper-glass | StepperGlass Component (Compound API) | Components | Free | no deps | |
| Switch Glassswitch-glass | Glass-themed toggle switch with smooth animations and accessibility features. * Built on @radix-ui/react-switch for robust state management and keyboard navigation. * * ## Features | Components | Free | no deps | |
| Tabs Glasstabs-glass | TabsGlass Component (Radix UI based) | Components | Free | no deps | |
| Theme Toggle Glasstheme-toggle-glass | Theme cycling button that switches between Light, Aurora, and Glass themes. * Displays animated icon transitions with theme-aware styling. * * ## Features | Components | Free | no deps | |
| Toggle Glasstoggle-glass | Glass-themed toggle switch with shadcn/ui compatible API: | Components | Free | no deps | |
| Tooltip Glasstooltip-glass | Glass-themed tooltip with: | Components | Free | no deps |
Blocks
Search within| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Ai Card Glassai-card-glass | AI-themed interactive card with feature list and generate button. * Designed for AI analysis, report generation, and ML-powered features. * * ## Features | Blocks | Free | no deps | |
| Career Stats Glasscareer-stats-glass | Career Stats Glass component with glass effects | Blocks | Free | no deps | |
| Career Stats Header Glasscareer-stats-header-glass | Career Stats Header Glass component with glass effects | Blocks | Free | no deps | |
| Circular Metric Glasscircular-metric-glass | Compact circular progress metric display optimized for mobile layouts. * Combines CircularProgressGlass with a label for space-efficient metric visualization. * * ## Features | Blocks | Free | no deps | |
| Contribution Metrics Glasscontribution-metrics-glass | Repository contribution metrics grid displaying user and project statistics. * Extracted from RepositoryCardGlass for reusable contribution displays. * * ## Features | Blocks | Free | no deps | |
| Flags Section Glassflags-section-glass | Flags Section Glass component with glass effects | Blocks | Free | no deps | |
| Header Branding Glassheader-branding-glass | Header Branding Glass component with glass effects | Blocks | Free | no deps | |
| Header Nav Glassheader-nav-glass | Header Nav Glass component with glass effects | Blocks | Free | no deps | |
| Metric Card Glassmetric-card-glass | Rich metric display card with progress bars, sparklines, and trend indicators. * Follows shadcn/ui variant system with Glass UI extensions for data visualization. * * ## Features | Blocks | Free | no deps | |
| Metrics Grid Glassmetrics-grid-glass | Responsive grid layout for displaying multiple MetricCardGlass components. * Extracted from TrustScoreCardGlass for reusable metric dashboard layouts. * * ## Features | Blocks | Free | no deps | |
| Profile Header Extended Glassprofile-header-extended-glass | Formats ISO 8601 date to human-readable format | Blocks | Free | no deps | |
| Profile Header Glassprofile-header-glass | Layout mode for the profile header | Blocks | Free | no deps | |
| Projects List Glassprojects-list-glass | Projects List Glass component with glass effects | Blocks | Free | no deps | |
| Repository Card Contextrepository-card-context | Hook to access RepositoryCardGlass context | Blocks | Free | no deps | |
| Repository Card Glassrepository-card-glass | ContributionBadge - Shows contribution percentage with color-coded variant | Blocks | Free | no deps | |
| Repository Header Glassrepository-header-glass | Repository Header Glass component with glass effects | Blocks | Free | no deps | |
| Repository Metadata Glassrepository-metadata-glass | Repository Metadata Glass component with glass effects | Blocks | Free | no deps | |
| Split Layout Accordionsplit-layout-accordion | SplitLayoutGlass Accordion Components | Blocks | Free | no deps | |
| Split Layout Contextsplit-layout-context | SplitLayoutGlass Context | Blocks | Free | no deps | |
| Split Layout Glasssplit-layout-glass | SplitLayoutGlass Component (Compound API only) | Blocks | Free | no deps | |
| Trust Score Card Glasstrust-score-card-glass | Trust Score Card Glass component with glass effects | Blocks | Free | no deps | |
| Trust Score Display Glasstrust-score-display-glass | Large animated trust score display with gradient text and pulsing animation. * Extracted from TrustScoreCardGlass for reusability across layouts. * * ## Features | Blocks | Free | no deps | |
| User Info Glassuser-info-glass | User name, username, and join date display component. * Extracted from ProfileHeaderGlass for reusable user identity sections. * * ## Features | Blocks | Free | no deps | |
| User Stats Line Glassuser-stats-line-glass | User statistics line displaying repos, followers, and following counts. * Extracted from ProfileHeaderGlass for reusable user metrics displays. * * ## Features | Blocks | Free | no deps | |
| Year Card Contextyear-card-context | Hook to access YearCardGlass context | Blocks | Free | no deps | |
| Year Card Glassyear-card-glass | @deprecated This prop is no longer used. Sparkline is now only shown in expanded view. | Blocks | Free | no deps |
Utilities
Search within| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Form Field Wrapperform-field-wrapper | Unified wrapper for form controls with label, validation states, and messages. * Eliminates code duplication across InputGlass, SliderGlass, ComboBoxGlass, etc. * * Handles: | Utilities | Free | no deps | |
| Interactive Cardinteractive-card | Unified wrapper for card components with hover animations and glass effects. * Eliminates hover state duplication in MetricCardGlass, YearCardGlass, * AICardGlass, RepositoryCardGlass, and other card components. * * Features: | Utilities | Free | no deps | |
| Touch Targettouch-target | Ensures minimum touch target size compliance with Apple Human Interface Guidelines. * Wraps interactive elements to guarantee accessibility on touch devices. * * Apple HIG recommends minimum 44×44pt (44×44px) touch targets. * Material Design recommends 48×48dp for better accessibility. * * @see https://developer.apple.com/design/human-interface-guidelines/layout | Utilities | Free | no deps |
