Dev Design Library

Cult UI components

Components crafted for Design Engineers. Styled using Tailwind CSS, fully compatible with Shadcn, and easy to integrate—just copy and paste. MIT 🤌

Components
138
Framework
React
Stack
React, TypeScript, Tailwind
License
MIT
GitHub stars
6,225
Source
https://github.com/nolly-studio/cult-ui
Website
https://www.cult-ui.com

All Cult UI components

  • Agent Suggest Card Stack: Stack of suggestion cards for AI agent responses
  • Ai Blob Warp: Circular avatar with Paper Design Warp shader; motion-safe pulse, pauses off-screen and when reduced motion is preferred
  • Ai Instructions: Manage and toggle AI instructions with a popover, search, and create-dialog
  • Analytics Chart: Vercel-style gradient line chart with floating tooltip cards
  • Animated Number: Number component with smooth counting animations and customizable formatting
  • Apple Iphone 17 Pro: iPhone-style device frame with Dynamic Island, status bar, and configurable frame colors
  • Apple Keyboard: Compact Apple-style keyboard with labeled keys and media row
  • Apple Pro Display Xdr: Studio Display–style aluminum frame, screen modes, and interactive macOS dock
  • Apple Watch Ultra: Watch Ultra–style case, complications, crown, and action button
  • Base Select: Base UI select primitives used by Halo Select
  • Base Tooltip: Base UI tooltip primitives used by Apple Pro Display XDR
  • Bg Animate Button: Button component with animated background effects and gradient transitions
  • Bg Animated Fractal Dot Grid: Background animated fractal dot grid with performance optimization and responsive design
  • Bg Animated Gradient: Animated gradient background component with customizable color transitions
  • Bg Image Texture: Background texture component with multiple texture variants and customizable opacity
  • Bg Media: Background media component with video/image support and overlay effects
  • Border Beam Button: Shadcn Button wrapped in Border Beam: animated border glow with compact icon and text variants
  • Border Beam Card: border-beam around compound Card API with balanced title and description
  • Border Beam Input: border-beam on Base UI input and input-group primitives with line or full border glow
  • Canvas Fractal Grid: Interactive canvas-based fractal dot grid with mouse tracking and wave effects
  • Choice Poll: Poll component with single or multiple selection, optional results, and keyboard navigation
  • Circuit Board: Animated SVG circuit illustration with glowing traces and a central chip, for hero or product sections
  • Code Block: A beautiful code block component with tabs, copy functionality, and smooth animations
  • Collab Avatar: Collaboration avatar with initials and color
  • Collab Toolbar: Toolbar component for collaborative editing UI
  • Color Picker: Interactive color picker component with HSL support and preset colors
  • Copy Button: Button that copies content to clipboard with feedback
  • Cosmic Button: Animated button/link with cosmic gradient border effect, renders as anchor or button
  • Cutout Card: Image card with cutout corners, hover motion, inset labels, pins, and reveal actions
  • Direction Aware Tabs: Tab component with direction-aware animations and smooth transitions
  • Distorted Glass: A glass morphism effect component using SVG filters with fractal noise to create visual transitions between sections
  • Dither Image: Compound Next.js image figure with CSS Bayer dither via dither-plugin, partial reveal overlays, and typed tuning props
  • Dock: macOS-style dock component with hover effects and smooth animations
  • Dynamic Island: iOS-style dynamic island component with expandable content and smooth animations
  • Edge Blur: Stacked backdrop-blur layers with a gradient mask for soft top or bottom screen edges
  • Expandable: Expandable component system with smooth animations and customizable presets
  • Expandable Screen: A full-screen expandable component with morphing animations using shared layout IDs for smooth transitions
  • Family Button: Button component with family-style design and interactive hover effects
  • Family Drawer: A multi-view drawer component with smooth animations, view navigation, and customizable content views
  • Feature Carousel: Feature carousel component with smooth transitions and customizable layouts
  • Feature Poll: Feature poll component with single or multiple selection, optional results, and keyboard navigation
  • Feature Sticky Section: Sticky section with controllable panels and scroll behavior
  • Feature Voting: List of features with up-vote support, optional sorting by vote count, and controlled or uncontrolled state
  • File Icons: Icon set for file types and languages
  • Floating Panel: Floating panel component with backdrop blur and position-aware animations
  • Fluid Ai Workloads: Fluid visualization for AI workload states
  • Fluted Glass: Paper Design fluted-glass image shader with sensible defaults — ribbed, streaked distortions over a source image
  • Folded Card: Card with folded corner clip-path accent
  • Gateway Endpoint Illustration: Illustration for gateway endpoint concepts
  • Gateway Route Illustration: Illustration for gateway routing
  • Gateway Svg Illustration: SVG illustration for gateway overhead
  • Globe: COBE-powered 3D globe with showcase presets, markers, arcs, DOM overlays, and theme-aware styling
  • Gradient Button Group: Premium layered button group with animated active state, gradient ring accents, and theme toggle underlay
  • Gradient Heading: Heading component with gradient text effects and customizable styling
  • Grid Beam: Canvas grid beam animation with palette presets, SVG dividers, and composable headless pieces via useGridBeam
  • Halo Badge: Badge with optional layout animation, live status dot, and gradient rim aligned with Halo Button / Card
  • Halo Button: Primary action button with animated gradient rim, frosted fill, staggered label, and loading spinner
  • Halo Card: Composable card with animated gradient rim, frosted fill, layered shadow, and Base UI button actions
  • Halo Dropzone: File dropzone with animated rim, frosted fill, moving border trail, and file-type glyphs
  • Halo Field: Form field layout (label, description, error) for HaloInput and HaloTextarea
  • Halo Input: Single-line and multiline inputs with frosted fill and gradient rim for generic forms
  • Halo Notification: Polished notification surface for local AnimatePresence use with rim variants and glyph stagger
  • Halo Progress: Progress bar with spring-driven determinate fill and indeterminate gradient strip
  • Halo Search: Search input with animated gradient border, staggered placeholder, blur deletion on clear, loading line, and Warp shader avatar
  • Halo Segmented: Segmented control with frosted track, gradient rim, and spring sliding thumb
  • Halo Select: Composable animated select with gradient rim, frosted fill, and staggered label
  • Halo Switch: Toggle switch with spring thumb, frosted track, and extended touch hit area
  • Halo Tabs: Base UI tabs with gradient indicator: underline or pill variant aligned with Halo Card rim colors
  • Halo Toast: Sonner-backed polished toasts with rim variants; mount PolishedToaster once in the root layout
  • Halo Toggle Group: Segmented single-select control with frosted track, gradient rim, and spring-driven sliding thumb (aligned with Halo Button)
  • Hero Color Panel: Split-layout hero section with responsive ColorPanels shader visuals, CTA, and tech stack badges
  • Hero Dithering: Split-layout hero section with responsive dithering shader visuals, CTA, and tech stack badges
  • Hero Heatmap: Split-layout hero section with responsive Heatmap shader visuals, CTA, and tech stack badges
  • Hero Liquid Metal: Split-layout hero section with responsive LiquidMetal shader visuals, CTA, and tech stack badges
  • Hero Static Radial Gradient: Split-layout hero section with responsive StaticRadialGradient shader visuals, CTA, and tech stack badges
  • Hover Video Player: Video player component that plays on hover with smooth animations
  • Illustration Card Grid: Grid of cards with gateway illustrations
  • Illustration Comment Bubble: Comment bubble illustration for code or chat UI
  • Illustration Cursor: Cursor illustration and demo for collaboration UI
  • Illustration Fluid Rendering: Fluid rendering illustration
  • Illustration Globe Vercel: Globe deployment illustration
  • Illustration Graph: Graph illustration component
  • Intro Disclosure: Intro disclosure component with expandable content and smooth animations
  • Kanban Board: Kanban board with drag-and-drop columns and cards
  • Lightboard: Interactive lightboard component with customizable grid and lighting effects
  • Loading Carousel: Loading carousel component with smooth transitions and customizable content
  • Logo Carousel: Animated logo carousel with staggered animations and customizable columns
  • Mac Screen: Classic Mac frame with an image or GIF composited into the CRT
  • Marketing Feature Code: Marketing section for code or network policy features
  • Marketing Hero Analytics: Analytics hero section for marketing pages
  • Merging Bubbles: Merging bubbles visualization
  • Metal Button: Shadcn Button wrapped in MetalFx: animated liquid metal ring with text and icon variants
  • Minimal Card: Clean and minimal card component with subtle styling and hover effects
  • Mock Browser Window: A customizable browser window mockup component with support for Chrome, Safari, and generic styles, customizable sidebars, and themes
  • Morph Surface: A morphing surface component with smooth animations, customizable dimensions, and configurable content
  • Neumorph Button: Neumorphic button component with soft shadows and tactile interaction effects
  • Neumorph Eyebrow: Neumorphic eyebrow component with soft shadow effects and modern styling
  • Onboarding: Composable multi-step onboarding primitives: Onboarding root with step navigation, FeatureCarousel, ChoiceGroup radio selector, TipsList…
  • Organic Button: Anchor-based CTA with fixed SVG end caps, shared surface colors via CSS variables, and size and animation variants
  • Organic Card: Composable marketing card with optional link root, image slot, eyebrow/title/body, accent band, and footer CTA
  • Organic Card Small: Compact card with SVG silhouette, category and date, motion morph on hover, and optional link
  • Pixel Heading Character: Per-character pixel-font heading with four animation modes using Geist pixel fonts
  • Pixel Heading Word: Whole-word pixel-font heading that swaps or cycles fonts on hover using Geist pixel fonts
  • Pixel Paragraph Words: Paragraph where specific words render in an interactive pixel font that swaps or cycles on hover
  • Pixel Paragraph Words Inverse: Paragraph in pixel font where specific words escape into interactive sans/mono with hover swap or cycle
  • Poll Widget: Poll widget with inline, popover, and dialog modes, optional results, and animations
  • Popover: Animated popover component with form support and smooth transitions
  • Popover Form: Form popover component with success states and animated transitions
  • Prompt Composer: Multiline prompt field with shader avatar, staggered placeholder, loading line, and send/attach chrome
  • Prompt Library: Browse, insert, and manage prompt templates with categories and custom prompts
  • Rolling Number: Number component with smooth counting animations and customizable formatting
  • Security Checkpoint: Security checkpoint illustration or component
  • Shader Lens Blur: WebGL shader component with lens blur effects and mouse interaction
  • Shadow Card: Composable marketing card with L-shaped extrusion, optional pixel gradient mesh, and Radix Slot on the root
  • Shift Card: Card component with shift animation effects and hover interactions
  • Side Panel: Sliding side panel component with customizable positioning and animations
  • Sortable List: Drag-and-drop sortable list component with smooth animations and reordering
  • Speech Bubble: Speech bubble component
  • Squiggle Arrow: A playful, hand-drawn squiggly arrow component with customizable variants, directions, and sizes
  • Stripe Bg Guides: Stripe-style background guides component with animated patterns and effects
  • Svg Bands: Wide SVG section bands, battlement and zigzag trims, steep hero edges, and ornamental frames
  • Svg Shapes: Wide-aspect SVG shape and panel components for backgrounds and hero decorations
  • Svg Shapes Animated: Scroll-triggered stroke-draw animations for wide SVG shapes and panels using Motion
  • Tabs Illustration Vercel: Tabs with Vercel-style illustrations
  • Terminal Animation: Composable terminal animation primitives with typed command playback, tabbed scenarios, and customizable output rendering
  • Text Animate: Animated text component with customizable reveal effects and timing
  • Text Gif: Text component with GIF-like animation effects and customizable styling
  • Texture Button: Button component with texture overlay effects and customizable variants
  • Texture Card: Card component with texture background and customizable styling options
  • Texture Overlay: Texture overlay component with various CSS gradient patterns for adding visual texture to backgrounds
  • Three D Carousel: 3D carousel component with perspective effects and smooth item transitions
  • Timer: Countdown timer component with customizable duration and visual styles
  • Toolbar Expandable: Expandable toolbar component with step-based navigation, smooth animations, and enhanced scrolling
  • Tweet Grid: Grid layout component for displaying tweet-like content cards
  • Typewriter: Typewriter effect component with customizable typing speed and cursor animation
  • Vote Tally: List of items with up-vote support, optional sorting by vote count, and controlled or uncontrolled state
  • Wizard Expandable: Expandable multi-step wizard with optional forward validation, scrollable step rail, and Motion height transitions
  • Youtube Video Player: YouTube video player component with custom controls and smooth animations

Browse by category