Dev Design Library

Componentry components

Animated, production-ready UI components. Built the way real products need them.

Components
67
Framework
React
Stack
React, TypeScript, Tailwind
License
MIT
GitHub stars
541
Source
https://github.com/harshjdhv/componentry
Website
https://componentry.dev
Install
npx shadcn@latest add @componentry/{name}

All Componentry components

  • Animated Gradient: A beautiful, animated, and customizable WebGL gradient with noise capabilities.
  • Annotated Text: Hand-drawn marks — circles, highlights, underlines, cross-outs — sketched around inline text.
  • Ascii Effect: Render images as responsive ASCII artwork with image, flow, and glitch variations.
  • Aurora Flow: Procedural atmospheric hero background with layered flowing color, diffused aurora light, and subtle interaction.
  • Autocomplete
  • Case Study Flip Stack: Editorial case study cards that fold upward on scroll to reveal the next story.
  • Circuit Board: Animated circuit board visualization with nodes and connections.
  • Closing Plasma: Plasma field tailored for footer and CTA sections with premium atmospheric motion.
  • Collection Surfer: Smooth surfing interaction for browsing collections.
  • Command
  • Coss Badge
  • Coss Button
  • Cursor Driven Particle Typography
  • Dither Gradient: Gradient background with dithering noise.
  • Dither Prism Hero: Stunning WebGL hero with advanced dithering, prismatic refraction, holographic iridescence, and center-focused energy.
  • Dithered Logo: An interactive particle logo that turns image assets into a dithered canvas field with cursor ripples.
  • Eye Tracking: Hyper-realistic eyes that follow your cursor with smooth spring physics, reactive pupils, blinking, and multiple stunning variants.
  • Fisheye Infinite Grid: A dense draggable image wall warped as one continuous fisheye surface with weighted momentum.
  • Flight Status Card: A detailed card showing flight information with animations.
  • Flipping Word Swap: A clean character-by-character flip between two words on interaction.
  • Github Calendar: GitHub-style contribution calendar heatmap.
  • Gradient Hero 01: A simple centered hero with a warm cinematic gradient, compact badge, short copy, and two actions.
  • Grain Gradient: A breathing color field with flowing shadows, customizable film grain, and soft atmospheric light.
  • Hero Geometric: Geometric shapes and patterns for hero sections.
  • Hover Transition: Eight polished hover transitions with per-card animation, direction, color, and content controls.
  • Image Ripple Effect: WebGL-powered cursor ripples that displace layered image cards in real time.
  • Image Trail: Leaves a trail of images behind the cursor with a premium delay fade.
  • Infinite Image Field: An endless, cursor-driven photo canvas that tiles images infinitely and pans fluidly toward wherever you move your cursor.
  • Input
  • Kbd
  • Kinetic Text Reveal: Directional text reveal with soft blur and configurable word, character, or line stagger timing.
  • Layered Stack: A stack of layered cards that interact with mouse hover.
  • Lens Clock
  • Letter Cascade: Kinetic text animation where letters scatter outward with spring physics and blur, then elegantly reassemble.
  • Liquid Chrome: Premium fluid liquid metal shader background effect.
  • Liquid Glass Carousel: An infinite image carousel seen through a WebGL liquid-glass lens — chromatic rim, snap scroll, and a focus expand.
  • Mac Keyboard: A realistic Mac keyboard component with interactive keys and detailed styling.
  • Magnet Lines: Lines that react to cursor movement like a magnetic field.
  • Magnetic Dock: MacOS style dock that scales items based on mouse proximity.
  • Matrix Rain: Classic Matrix digital rain effect.
  • Music Player: A fun interactive vinyl record music player with swinging tonearm.
  • Newsletter Bookshelf: A tactile 3D newsletter archive with hover lift, camera browsing, centered covers, and automatic drag-adjustable orbiting.
  • Orbit Card Stack: Premium hover card deck that fans outward and lifts the active card without changing its color or angle.
  • Pixel Canvas: Canvas where pixels react to interaction.
  • Pixel Image Trail: An image reveal made from cursor-painted squares that expire into a bounded pixel trail.
  • Pricing 01: Three tactile pricing cards with revealed hover notes, clear feature lists, and a highlighted popular plan.
  • Pricing 02: A compact pricing table with separated plan summaries, detailed feature lists, and an animated billing-cycle switch.
  • Prism Gradient: A theme-aware WebGL prism field with liquid checkered motion, electric-blue refraction, and tactile grain.
  • Ripple Transition: WebGL image transitions with noisy refractive waves, chromatic edges, glow, and click-triggered ripple origins.
  • Scroll Area
  • Scroll Based Velocity
  • Scroll Choreography: A smooth, scroll-driven image choreography component using Framer Motion.
  • Scroll Split Card: A scroll-driven interactive card that splits into three panels and flips.
  • Scroll Tilted Grid: A cinematic image grid that tilts and resolves into focus as each frame crosses the viewport.
  • Signature: An animated SVG signature effect that draws out text as if hand-written.
  • Silk Aurora: Premium WebGL hero background with satin-dark aurora ribbons, pearlescent highlights, fine grain, and cursor depth.
  • Spectral Ribbon: A soft spectral light ribbon on pure black — slow liquid motion and rainbow fringe.
  • Spinner
  • Spiral 3D Slider: A compact, autoplaying image gallery that responds to scroll along a smooth 3D spiral.
  • Split Flap Display: A premium split-flap display component inspired by vintage departure boards.
  • Sticky Scroll Cards: A scroll-driven card stack where images pin and scale as you scroll, creating a layered depth effect.
  • Tabs
  • Text Morph: Centered fluid text transitions that inherit the surrounding typography and theme.
  • Text Repel: Physics-based text where each letter reacts to cursor proximity with spring dynamics, creating an interactive magnetic force-field effect.
  • Webgl Error Boundary
  • Webgl Liquid: Cinematic liquid shader hero with premium gradients, configurable reveal timing, and advanced flow controls.
  • Wheel Carousel: A cinematic rotating-wheel picker with inertial drag, curved fading labels, and crossfading project imagery.

Browse by category