Dev Design Library

uselayouts components

Free premium animated React components and micro-interactions built with Framer Motion and Tailwind CSS

Components
69
Framework
React
Stack
React, TypeScript, Tailwind
License
MIT
GitHub stars
602
Source
https://github.com/iurvish/uselayouts
Website
https://uselayouts.com
Install
npx shadcn@latest add https://uselayouts.com/r/{name}

All uselayouts components

  • 3D Book: An interactive 3D book component with page flip animations.
  • Accessible Action: Interactive draggable card stack with 3D tilt, swipe-to-back gestures, click interactions, random rotation, and smooth spring animations.
  • AccordionOS: Interactive accordion showcase with animated content, image transitions, hover effects, keyboard navigation, autoplay, and responsive…
  • Analog Stick: A metallic stick that tilts into the press. Hover a quadrant and the cap leans, the shadow shifts, and the matching arrow goes amber.
  • Animated Collection: A collection of items with smooth layout transitions and animations.
  • Bento Card: An interactive bento card with animated tabs and workspace preview.
  • Bookshelf: A shelf of cloth-bound books. Pull one out and it opens on the desk: covers swing on a hinge and pages turn by the corner.
  • Bottom Menu: A floating bottom navigation menu with smooth interactions.
  • Bucket: An interactive card component that simulates a bucket where chips are tossed and replaced with smooth physics-inspired animations.
  • Card Folder: This component creates an animated folder-style card with a background image, floating 3D object, hover effects, and customizable colors…
  • Client Card: A client CRM card with payment and deadline rings, plus a morphing avatar stack.
  • Confidential Folder: A charcoal sleeve that pulls a letter out, flips it, and lands it in front of you.
  • Corner Video: A compact corner video player with smooth open/close morphing, autoplay, mute, enlarge, hover controls, and video scrubbing.
  • Coverflow Drag: A drag coverflow of portraits that scale, dim, and snap as you swipe.
  • Create Menu: A Start Creating pill that springs open into a list of create actions.
  • Curve Drawer: Side drawers whose inner edge starts as a bulge and morphs into a straight line as the panel settles.
  • Day Picker: A custom day picker component with smooth animations.
  • Delete Button: A confirmation button with smooth icon transitions.
  • Discover Button: An interactive button with expanding discovery state.
  • Discrete Tabs: A tab component with discrete sliding animations.
  • Drawer Buttons: Two buttons that open side drawers with a 3D fold. Payment comes from the right, cart from the left, and the fields stagger in.
  • Dynamic Grid Gallery: A 3×2 photo grid that grows the hovered row and column so one still takes the stage.
  • Dynamic Toolbar: A toolbar that adapts its size and layout based on content.
  • Editorial Deck: A stacked editorial story deck. Drag the front card and it springs back into the pile.
  • Empty Testimonial: An interactive empty state for testimonials with a playful folder animation.
  • Expandable Gallery: A photo gallery with smooth item expansion.
  • Feature Carousel: A smooth carousel for showcasing product features.
  • Filter Interaction: Interactive list items with hover and focus effects.
  • Flower Menu: A radial flower-style quick actions menu with staggered smooth motion.
  • Fluid Expanding Grid: A responsive gallery grid that fluidly shifts and expands items using motion layout.
  • Focus Testimonials: Interactive testimonial section with hover-based focus effects, animated author tooltips, and expandable testimonials.
  • Folder Interaction: A folder management system with drag-and-drop-like feel.
  • Get In Touch: A glossy contact pill. Hover and the label lifts away so a portrait and YOU merge, then Let’s Talk! writes in.
  • Gooey Navbar: A pill nav that melts into its neighbor when you hover — liquid bridges, active dot.
  • Holographic Referral Card: A dark invite card that tilts in 3D with the pointer. A holographic glow follows. Touch stays still. Tab for a quiet glow.
  • Infinite Canvas: A free-panning product canvas that tiles forever — drag, scroll, and skim an endless grid of images and captions.
  • Inline Edit: An input that switches between read and edit modes.
  • Liquid Index: A feature list whose hover badge is a WebGL liquid gradient that tracks the row.
  • Magnified Bento: A bento card component with a draggable magnifying lens effect over scrolling chips.
  • Memory Card Stack: A fanned deck of five photographs. Start brings the top card up, then you page through it with the controls or throw it aside.
  • Morphing Input: An input field that morphs between different states.
  • Multi Step Form: A dynamic, animated multi-step form with validation.
  • Overlapping Slider: A full-width landing row of portrait cards. They sit flat until you move — then the card on the left scales back.
  • Paper Shred Button: Hover Delete and a page appears above it. Click and the page clips away while paper strips draw in below. After a few seconds it resets so…
  • Paywall: A premium paywall component with a pick your price detent slider, animated numeric price transitions, and a segmented plan control.
  • Perspective Text Scroll: A polished example interaction built with React and Motion.
  • Photo Albums: Tilted album stacks that expand into a shared-element photo grid.
  • Polaroid Drag: Draggable Polaroid photo gallery with realistic tilt, stacking, smooth animations, and customizable captions, sizes, and decorations.
  • Polaroid Stack: Seven Polaroids sit in a pile. Hover and they fan into an arc from one corner.
  • Pop Tilt Cards: Interactive tilt card deck with smooth hover animations, 3D popping effects, images, links, and customizable card styling.
  • Pricing Card: A focused pricing card layout with clear hierarchy.
  • Prompt Box: A collapsed chat composer that expands into a textarea with a model menu and send control.
  • Rolling Card Stack: It’s a responsive, animated rolling card stack component built with React, TypeScript, Tailwind CSS, and Framer Motion. It supports…
  • Save Button: A button with animated states for idle, loading, and success.
  • Scan Document: Click Scan and a page unfolds, flips, and a glowing bar reads it. Done holds, then it resets.
  • Scroll Split Cards: One photograph that splits into three panels as you scroll, then flips to copy.
  • Scroll Stack Deck: Scroll-linked project cards that pin in the viewport and stack, scale, and settle as you move down the page.
  • Set Timer: A dark timer pill that morphs into a minute wheel picker, then into a running timer with pause, cancel, and a rounded-rectangle progress…
  • Shake Testimonial Card: An eye-catching testimonial card with playful animations.
  • Slide Subscribe: Pick a billing period, then slide to start a trial.
  • Slider: A dual-sided ratio slider animated with spring physics and drag interactions.
  • Smooth Dropdown: A dropdown menu with premium layout transitions.
  • Stack Scroll Reveal: Scroll-linked case-study cards that pin in the viewport and peel, scale, and fade as you move down the page.
  • Stacked List: An expandable list widget with a stacked layout and smooth morphing transitions.
  • Stacked Outline Text: Heavy outlined type you can drag. Speed leaves a stacked white-on-black trail that springs back when you stop.
  • Tactile Button: A liquid-glass rocker that tilts into its well when you press it.
  • Theme Toggle: A physical switch with a dotted grip. Click and the knob slides across a recessed track.
  • Vertical Tabs: A vertical tab interaction with smooth content switching.
  • Wheel Carousel: This component creates a smooth wheel-style carousel with photos and selectable items. It supports drag, scroll, keyboard controls…

Browse by category