# Glin UI

> Glin UI is a free, open-source design hub for the modern web: 142 accessible React components, animations, OKLCH colors, design tokens and AI-ready docs. MIT licensed, Tailwind only, Phosphor icons, reduced-motion aware. Each component has a plain Markdown page for AI assistants.

Conventions for generated code: tokens from `@glinui/tokens`, Tailwind utilities only (no inline styles), Phosphor icons, honor `prefers-reduced-motion`, variants glinr, solid, plain, soft, outline, ghost, gradient and glass (opt-in). Install with `npx glinui add <id>` or `npx shadcn@latest add https://glinui.com/r/<id>.json`.

## Docs

- [Getting started](https://glinui.com/docs/getting-started): install and setup
- [AI-ready docs](https://glinui.com/docs/ai): how to use these files and the Copy for AI button
- [Variants](https://glinui.com/docs/variants): the surface variant and tone vocabulary
- [Animation engines](https://glinui.com/docs/engines): CSS built in, motion and GSAP opt-in
- [Animations](https://glinui.com/docs/animations): the animation hub
- [Accessibility](https://glinui.com/docs/accessibility): keyboard, focus and screen reader practices
- [Full text](https://glinui.com/llms-full.txt): every component page in one file

## Tokens and Colors

- [Design tokens](https://glinui.com/docs/tokens): colors, surfaces, elevation, type, radius and motion tokens
- [Colors](https://glinui.com/docs/colors): OKLCH color ramps and base colors
- [Color contrast](https://glinui.com/docs/color-contrast): AA contrast guidance

## Components: Buttons

- [Button](https://glinui.com/md/button.md): Action control with default, glass, liquid, matte, glow, outline, and ghost variants.
- [Shimmer Button](https://glinui.com/md/shimmer-button.md): Button with animated shimmer sweep overlay and glass-aware variants.
- [Ripple Button](https://glinui.com/md/ripple-button.md): Button with liquid ripple effect on press.
- [Pulsating Button](https://glinui.com/md/pulsating-button.md): Button with a pulsing glow ring animation for attention-grabbing CTAs.
- [Liquid Button](https://glinui.com/md/liquid-button.md): Button with fluid hover lift, press squish, and radial shine effect.
- [Magnetic CTA](https://glinui.com/md/magnetic-cta.md): Call-to-action button with subtle cursor-attraction on hover.
- [Interactive Hover Button](https://glinui.com/md/interactive-hover-button.md): Pill button whose accent dot floods the surface on hover, focus or press.
- [Generate Button](https://glinui.com/md/generate-button.md): AI style call to action with idle, generating and loading states.
- [Button Group](https://glinui.com/md/button-group.md): Merges adjacent buttons into one segmented control with shared borders.
- [Copy Button](https://glinui.com/md/copy-button.md): Raised pill that copies text, announces the result and resets after 1.6 seconds.
- [Toggle](https://glinui.com/md/toggle.md): A two-state button that can be pressed on or off.
- [Toggle Group](https://glinui.com/md/toggle-group.md): A set of toggles with single or multiple selection and merged segmented borders.
- [Glass Toggle](https://glinui.com/md/glass-toggle.md): Toggle switch with liquid fill animation and frosted glass surface.

## Components: Text and code

- [Text](https://glinui.com/md/text.md): Body text primitive for default, muted, and glass-highlighted copy.
- [Heading](https://glinui.com/md/heading.md): Semantic heading primitive with independent style scaling.
- [Text Reveal](https://glinui.com/md/text-reveal.md): Word-by-word opacity reveal driven by scroll position.
- [Reveal Text](https://glinui.com/md/reveal-text.md): Text that reveals through a clip-path wipe animation triggered on view.
- [Typewriter](https://glinui.com/md/typewriter.md): Character-by-character typing animation with blinking cursor and loop support.
- [Word Rotate](https://glinui.com/md/word-rotate.md): Cycling text animation that rotates through an array of words.
- [Chromatic Text](https://glinui.com/md/chromatic-text.md): Text with chromatic aberration effect, RGB channel splitting.
- [Hyper Text](https://glinui.com/md/hyper-text.md): Text that scrambles through random characters and settles on the real string, on hover, in view or on mount.
- [Morphing Text](https://glinui.com/md/morphing-text.md): Cycles through words with a gooey blur and threshold morph, paused off screen and static under reduced motion.
- [Sparkles Text](https://glinui.com/md/sparkles-text.md): Text with twinkling star sparkles that scale and rotate, with a static accent under reduced motion.
- [Gradient Text](https://glinui.com/md/gradient-text.md): Flowing gradient or shine sweep text, optionally inside a solid or glass pill badge.
- [Gooey Text Reveal](https://glinui.com/md/gooey-text-reveal.md): Heading whose words melt in through a shared SVG goo filter, or morph between phrases.
- [Spinning Text](https://glinui.com/md/spinning-text.md): Text laid out on a rotating circle with an accessible name and pause on hover.
- [Code](https://glinui.com/md/code.md): Inline code element for commands, snippets, and tokenized literals.
- [Code Panel](https://glinui.com/md/code-panel.md): Raised header bar over an inset code well with tok-k, tok-s, tok-c and tok-f token classes.
- [Install Command](https://glinui.com/md/install-command.md): Package manager tabs, a $ prefixed command and a copy button inside a code panel.
- [Terminal](https://glinui.com/md/terminal.md): Terminal window with sequenced typing and output, a full transcript and copy.
- [Kbd](https://glinui.com/md/kbd.md): Keyboard keycap primitive for shortcuts and key hints.

## Components: Backgrounds

- [Animated Gradient](https://glinui.com/md/animated-gradient.md): Animated color-shifting gradient background with warm, cool, aurora, and glass presets.
- [Gradient Mesh](https://glinui.com/md/gradient-mesh.md): Generative mesh gradient background using overlapping radial gradients.
- [Aurora Background](https://glinui.com/md/aurora-background.md): Animated gradient mesh backdrop with floating blurred blobs.
- [Dot Pattern](https://glinui.com/md/dot-pattern.md): Static SVG dot grid background with configurable size, gap, and theme colors.
- [Retro Grid](https://glinui.com/md/retro-grid.md): CSS perspective grid with scrolling lines for retro-futuristic backgrounds.
- [Grid Pattern](https://glinui.com/md/grid-pattern.md): SVG grid, stripes and interactive cell patterns with edge fades.
- [Flickering Grid](https://glinui.com/md/flickering-grid.md): Canvas grid of squares that flicker, with token colors and a static fallback.
- [Spotlight](https://glinui.com/md/spotlight.md): Full-page spotlight overlay for onboarding and feature highlighting.
- [Blur Spotlight](https://glinui.com/md/blur-spotlight.md): Cursor-following ambient glow effect for background layers.
- [Light Rays](https://glinui.com/md/light-rays.md): Soft swaying rays of light for hero and section backgrounds.
- [Particle Field](https://glinui.com/md/particle-field.md): Ambient floating particle system with CSS-only staggered animations.
- [Meteor Shower](https://glinui.com/md/meteor-shower.md): Falling diagonal streaks with staggered delays for hero backgrounds.
- [Light Leak](https://glinui.com/md/light-leak.md): Simulated lens flare and light leak overlay with drifting animation.
- [Ripple](https://glinui.com/md/ripple.md): Concentric expanding rings radiating from center for decorative backgrounds.
- [Animated Beam](https://glinui.com/md/animated-beam.md): A gradient beam that travels between two elements.

## Components: Cards and borders

- [Card](https://glinui.com/md/card.md): Flexible surface container for grouped content.
- [Glass Card](https://glinui.com/md/glass-card.md): Frosted card with depth-aware blur, refraction edge highlights, and elevation transitions.
- [Depth Card](https://glinui.com/md/depth-card.md): Parallax tilt card with layered glass planes and glare effect on hover.
- [Spotlight Card](https://glinui.com/md/spotlight-card.md): Card with cursor-tracked radial spotlight effect on hover.
- [Magic Card](https://glinui.com/md/magic-card.md): Card whose border and surface light up under the pointer or keyboard focus.
- [Neon Gradient Card](https://glinui.com/md/neon-gradient-card.md): Card with an animated neon gradient ring and soft glow.
- [Glow Border](https://glinui.com/md/glow-border.md): Rotating conic-gradient glow effect around container border.
- [Border Beam](https://glinui.com/md/border-beam.md): Light beam that travels along the border of its container via CSS offset-path.
- [Border Trail](https://glinui.com/md/border-trail.md): Glowing comet that travels along the border of a rounded container.
- [Prism Border](https://glinui.com/md/prism-border.md): Animated rainbow refraction border using a shifting linear gradient.
- [Shine Border](https://glinui.com/md/shine-border.md): Animated gradient edge that wraps any rounded container.
- [Bento Grid](https://glinui.com/md/bento-grid.md): Responsive bento layout of linked feature tiles.
- [Icon Frame](https://glinui.com/md/icon-frame.md): Consistent framed surface for icon glyphs and short initials.
- [Highlight Grid](https://glinui.com/md/highlight-grid.md): Hairline cell grid with one shared highlight that glides to the hovered, tapped or focused cell.

## Components: Navigation

- [Navigation Menu](https://glinui.com/md/navigation-menu.md): Site navigation with animated content panels, links and a shared viewport.
- [Menubar](https://glinui.com/md/menubar.md): Desktop-style horizontal menu bar with nested menus, checkbox and radio items.
- [Glass Navbar](https://glinui.com/md/glass-navbar.md): Translucent navigation bar that responds to scroll with blur intensity.
- [Glass Dock](https://glinui.com/md/glass-dock.md): macOS-style dock with proximity magnification and frosted glass surface.
- [Tabs](https://glinui.com/md/tabs.md): Tabbed interface for switching between grouped content panels.
- [Morphing Tabs](https://glinui.com/md/morphing-tabs.md): Tab component with a smoothly sliding indicator that morphs between items.
- [Breadcrumb](https://glinui.com/md/breadcrumb.md): Navigation trail with separators, collapsed ellipsis and variant-capable links.
- [Glass Breadcrumb](https://glinui.com/md/glass-breadcrumb.md): Pill-style breadcrumb with glass indicators and collapsible items.
- [Sidebar](https://glinui.com/md/sidebar.md): Collapsible app sidebar with icon rail, mobile sheet, Ctrl/Cmd+B shortcut, and persisted state.
- [Pagination](https://glinui.com/md/pagination.md): Page navigation with previous and next controls, numbered links and ellipsis.
- [Link](https://glinui.com/md/link.md): Tokenized anchor primitive with focus ring and variant surfaces.

## Components: Forms and inputs

- [Input](https://glinui.com/md/input.md): Single-line input with glass, liquid, matte, and utility variants.
- [Textarea](https://glinui.com/md/textarea.md): Multi-line input with glass, liquid, matte, and utility variants.
- [Input Group](https://glinui.com/md/input-group.md): An input with inline or block addons such as icons, text and buttons in one shared container.
- [Input OTP](https://glinui.com/md/input-otp.md): A one-time-code input with segmented slots, paste and autofill support.
- [Select](https://glinui.com/md/select.md): Native select with glass, liquid, matte, and utility variants.
- [Combobox](https://glinui.com/md/combobox.md): A searchable select built from Popover and Command.
- [Field](https://glinui.com/md/field.md): Accessible form field layout that wires labels, descriptions and errors to a control.
- [Label](https://glinui.com/md/label.md): Form label primitive with shared glass-aware variants.
- [Checkbox](https://glinui.com/md/checkbox.md): Radix checkbox with glass, liquid, matte, and outline surface variants.
- [Radio Group](https://glinui.com/md/radio-group.md): Mutually exclusive selection control with variant-capable radio items.
- [Switch](https://glinui.com/md/switch.md): On/off control built on Radix switch primitive.
- [Slider](https://glinui.com/md/slider.md): Range input control built on Radix slider primitive with glass thumb/track styling.

## Components: Overlays and menus

- [Modal / Dialog](https://glinui.com/md/modal.md): Layered dialog for focused tasks or confirmations.
- [Alert Dialog](https://glinui.com/md/alert-dialog.md): Destructive action confirmation dialog with explicit cancel and action controls.
- [Sheet / Drawer](https://glinui.com/md/sheet.md): Sliding panel for side, top, or bottom contextual workflows.
- [Floating Panel](https://glinui.com/md/floating-panel.md): Draggable glass panel with depth shadows and optional close button.
- [Popover](https://glinui.com/md/popover.md): Floating content panel anchored to a trigger element.
- [Hover Card](https://glinui.com/md/hover-card.md): Preview card that appears on hover or focus with configurable delays and placement.
- [Tooltip](https://glinui.com/md/tooltip.md): Context hint on hover/focus using Radix tooltip primitive.
- [Dropdown Menu](https://glinui.com/md/dropdown-menu.md): Action menu anchored to a trigger with keyboard navigation.
- [Context Menu](https://glinui.com/md/context-menu.md): Right-click menu with items, checkbox and radio items, submenus and shortcuts.
- [Command](https://glinui.com/md/command.md): Command palette for keyboard-driven actions and search.

## Components: Feedback and status

- [Alert](https://glinui.com/md/alert.md): Contextual feedback message with default, glass, outline, and ghost variants.
- [Toast](https://glinui.com/md/toast.md): Glassmorphic toast notifications powered by Sonner with success, error, warning, info, loading, promise, and action support.
- [Spinner](https://glinui.com/md/spinner.md): Accessible loading indicator with a reduced-motion pulsing ring fallback.
- [Skeleton](https://glinui.com/md/skeleton.md): Loading placeholder surface with reduced-motion fallback.
- [Progress](https://glinui.com/md/progress.md): Determinate linear and circular progress indicators with tokenized variants and sizing.
- [Empty](https://glinui.com/md/empty.md): Empty state with media, title, description, and action slots.
- [Status Dot](https://glinui.com/md/status-dot.md): Colored status indicator with optional label and pulse state.

## Components: Data display

- [Badge](https://glinui.com/md/badge.md): Compact status indicator for labels, states, and counts.
- [Chip](https://glinui.com/md/chip.md): Compact pill-style tag for statuses and lightweight metadata.
- [Table](https://glinui.com/md/table.md): Composable data table with semantic sections and glass variant support.
- [Data Table](https://glinui.com/md/data-table.md): Feature-rich table wrapper with search, sorting, pagination, selection, and column controls.
- [Counter](https://glinui.com/md/counter.md): Numeric badge that compacts overflow values like 99+.
- [Number Ticker](https://glinui.com/md/number-ticker.md): Animated number counter triggered by scroll visibility via IntersectionObserver.
- [Avatar](https://glinui.com/md/avatar.md): Profile image with SVG-ready sources, fallback rendering, and multiple glass-aware surface variants.
- [Item](https://glinui.com/md/item.md): Flexible list row with media, content, actions, header, and footer slots.
- [Tree](https://glinui.com/md/tree.md): Hierarchical tree view for file structures, navigation, and nested data.
- [Image Comparison](https://glinui.com/md/image-comparison.md): Before and after layers split by a draggable, keyboard operable slider handle.

## Components: Layout and structure

- [Accordion](https://glinui.com/md/accordion.md): Expandable content sections with smooth disclosure behavior.
- [Collapsible](https://glinui.com/md/collapsible.md): Radix collapsible region with an animated trigger and content for show and hide sections.
- [Scroll Area](https://glinui.com/md/scroll-area.md): Custom-styled scroll container with vertical and horizontal scrollbars that keeps native scrolling.
- [Separator](https://glinui.com/md/separator.md): Visual divider for grouping content with orientation support.
- [Aspect Ratio](https://glinui.com/md/aspect-ratio.md): Constrains content to a width to height ratio with optional surface frame.
- [Browser Frame](https://glinui.com/md/browser-frame.md): Generic browser window chrome drawn in CSS with a slot for any content.
- [Progressive Blur](https://glinui.com/md/progressive-blur.md): Edge overlay that blurs content progressively using stacked masked backdrop filters.
- [Cylinder Carousel](https://glinui.com/md/cylinder-carousel.md): Slides on a rotating 3D ring with buttons, arrow keys, swipe and a pausable autoplay.
- [Circular Gallery](https://glinui.com/md/circular-gallery.md): Tiles on a ring that rotates to the front with drag inertia, keys, click and optional autorotate.

## Components: Blocks

- [Hero Section](https://glinui.com/md/hero-section.md): Landing hero with announcement pill, actions, media slot and logo strip in centered, split and stacked layouts.
- [Feature Grid](https://glinui.com/md/feature-grid.md): Icon-framed feature cards in three-up, bento, icon-list and alternating-row layouts.
- [Pricing Section](https://glinui.com/md/pricing-section.md): Tier cards with monthly or yearly switch, highlighted plan, check lists and a comparison table layout.
- [FAQ Section](https://glinui.com/md/faq-section.md): Accordion based FAQ with two column or centered layout, category tabs and a FAQPage JSON-LD helper.
- [CTA Band](https://glinui.com/md/cta-band.md): Closing call to action: centered, split with email capture, or boxed with a token glow.
- [Footer Block](https://glinui.com/md/footer-block.md): Site footer with link groups, brand and newsletter slots, social icons, legal row and theme toggle slot.
- [Logo Cloud](https://glinui.com/md/logo-cloud.md): Grayscale-to-color logo strip with a marquee option that respects reduced motion.
- [Testimonials Wall](https://glinui.com/md/testimonials-wall.md): Social proof as masonry columns, vertical marquee columns or a single featured quote.

## Components: AI

- [Message](https://glinui.com/md/message.md): Chat turn layout with roles, avatar, bubble content and an actions toolbar (copy, regenerate, feedback).
- [Bubble](https://glinui.com/md/bubble.md): Chat bubble surface with default, muted, accent and glass variants, optional tail and grouped spacing.
- [Message Scroller](https://glinui.com/md/message-scroller.md): Conversation log that sticks to the bottom, shows a jump to latest pill and announces new messages politely.
- [Prompt Input](https://glinui.com/md/prompt-input.md): Auto-growing chat composer with send and stop, IME-safe Enter handling, attachment slot and character hint.
- [Attachment](https://glinui.com/md/attachment.md): File chip or image thumbnail with type icon, size, upload progress and remove button.
- [Questionnaire](https://glinui.com/md/questionnaire.md): Multi-step form with single and multiple choice option cards, progress and keyboard accessible radio and checkbox semantics.
- [Streaming Text](https://glinui.com/md/streaming-text.md): Progressive text reveal with caret and completion callback, instant under reduced motion.
- [Thinking](https://glinui.com/md/thinking.md): Reasoning indicator with animated dots or pulsing text and collapsible reasoning details.

## Components: Motion

- [Reveal](https://glinui.com/md/reveal.md): Scroll-triggered entrance with fade, slide, blur and scale variants, driven by a pluggable animation engine (css, motion or gsap).
- [Split Text](https://glinui.com/md/split-text.md): Splits text into characters, words or lines and animates them in with the active animation engine.
- [Count Up](https://glinui.com/md/count-up.md): Counts a number up on scroll with the active animation engine, jumping to the end value when motion is off.
- [Stagger List](https://glinui.com/md/stagger-list.md): Reveals child items one after another with configurable stagger and direction using the active animation engine.
- [Blur Fade](https://glinui.com/md/blur-fade.md): Scroll-triggered entrance animation with blur, fade, and slide transitions.
- [Marquee](https://glinui.com/md/marquee.md): Infinite horizontal or vertical scrolling content with pause-on-hover support.
- [Orbiting Circles](https://glinui.com/md/orbiting-circles.md): CSS-driven orbital animation that keeps children upright via double-rotate.

## Blog

- [Glin UI v2: a free design hub for the modern web](https://glinui.com/blog/glin-ui-v2): What changed in Glin UI v2: the glinr look, plain and glass variants, design tokens, animation engines, AI-ready docs and a free forever pledge.
- [Blog index](https://glinui.com/blog): all posts, newest first

## Optional

- [Attribution](https://glinui.com/docs/attribution): credits for adapted components
- [Free forever pledge](https://glinui.com/docs/free-forever): the MIT license pledge
- [Privacy](https://glinui.com/privacy): what the site stores and loads
- [Terms](https://glinui.com/terms): terms for the site and code
- [Sitemap](https://glinui.com/sitemap.xml): every indexable URL
- [RSS feed](https://glinui.com/blog/rss.xml): blog updates