HomeBookmarks
LayoutsLayouts
Layouts

Layouts

A micro-interaction React UI library built on shadcn/ui and Framer Motion.

0Xby 0xUrvish
22components1.9Mviews13.2Kbookmarks
Auto-indexed

Layouts contents

  • Inline Edit

    Inline Edit

  • Stacked List x

    Stacked List x

  • Smooth Dropdown

    Smooth Dropdown

  • Morphing Input

    Morphing Input

  • Expandable Gallery

    Expandable Gallery

  • Vertical Tabs

    Vertical Tabs

  • Pricing Card

    Pricing Card

  • Magnified Bento

    Magnified Bento

  • List Item

    List Item

  • Folder Interaction

    Folder Interaction

  • Fluid Expanding Grid

    Fluid Expanding Grid

  • Feature Carousel

    Feature Carousel

  • Empty Testimonial

    Empty Testimonial

  • Dynamic Toolbar

    Dynamic Toolbar

  • Discrete Tab

    Discrete Tab

  • Discover Button

    Discover Button

  • Delete Button

    Delete Button

  • Day Picker

    Day Picker

  • BucketBucket

    Bucket

  • Bottom Menu

    Bottom Menu

  • Bento Card

    Bento Card

  • Animated CollectionAnimated Collection

    Animated Collection

  • That's all 22 components

    About Layouts

    Layouts publishes a shadcn registry at uselayouts.com, with 0 components installable through the shadcn CLI.

    Components
    0
    GitHub stars
    699
    Last commit
    Oct 19, 2026
    Repository
    iurvish/uselayouts

    Also in the Layouts registry

    Copy a prompt for your agent, copy the install command, or open the docs that ship it.

    Everything this registry ships is already here.

    From the Layouts readme

    uselayouts

    A micro-interaction UI library for professionals.

    uselayouts provides free premium animated React components and micro-interactions built with Framer Motion and Tailwind CSS. Designed to integrate seamlessly with Shadcn UI, it helps you bring your interfaces to life with ease.

    Why uselayouts?

    People don’t fall in love with components. They fall in love with how something feels. uselayouts focuses on the fine details of interaction:

    • Premium Animations: Built with Framer Motion for buttery smooth transitions.
    • Shadcn Compatible: Designed to work with your existing Shadcn UI setup.
    • Micro-interactions: Focused on the small details that make a big difference in UX.
    • Copy & Paste: Easy to integrate into any React project.

    Installation

    You can add components to your project using the Shadcn CLI:

    npx shadcn@latest add https://uselayouts.com/r/3d-book
    

    Replace 3d-book with any component name from our documentation.

    Features

    • Accessible: Built on top of accessible primitives.
    • Customizable: Fully stylable with Tailwind CSS classes.

    Development

    If you'd like to run the documentation site locally:

    1. Clone the repository:
      git clone https://github.com/iurvish/uselayouts.git
      
    2. Install dependencies:
    yarn install
  • Run the development server:
    yarn dev
    
  • Registry Build

    To build the component registry:

    yarn build:registry
    

    Community

    • Website: uselayouts.com
    • Twitter/X: @0xUrvish
    • GitHub: iurvish/uselayouts

    License

    Built by Urvish Mali. Licensed under the MIT License.

    Read the rest on GitHub →

    What Layouts builds on

    The packages and primitives its components pull in, counted across the registry.

    button5input5select2textarea2badge1calendar1card1field1popover1

    What Layouts shipped recently

    Every appearance and removal our crawl has seen in the registry index.

    • accessible-actionaddedSep 23, 2026
    • accordionosaddedSep 23, 2026
    • analog-stickaddedSep 23, 2026
    • card-folderaddedSep 23, 2026
    • client-cardaddedSep 23, 2026
    • confidential-folderaddedSep 23, 2026
    • corner-videoaddedSep 23, 2026
    • coverflow-dragaddedSep 23, 2026
    • create-menuaddedSep 23, 2026
    • curve-draweraddedSep 23, 2026
    • drawer-buttonsaddedSep 23, 2026
    • dynamic-grid-galleryaddedSep 23, 2026
    • editorial-deckaddedSep 23, 2026
    • filter-interactionaddedSep 23, 2026
    • focus-testimonialsaddedSep 23, 2026
    • get-in-touchaddedSep 23, 2026
    • gooey-navbaraddedSep 23, 2026
    • holographic-referral-cardaddedSep 23, 2026
    • infinite-gridaddedSep 23, 2026
    • liquid-indexaddedSep 23, 2026

    Browse every shadcn registry we track →

    1. Components
    2. /
    3. 0xUrvish
    4. /
    5. Layouts

    Related libraries

    Ruixen UI

    Ruixen UI

    by Ruixen UI

    347

    components

    Efferd

    Efferd

    by Efferd

    114

    components

    HextaUI

    HextaUI

    by Preet Suthar

    119

    components

    ReUI

    ReUI

    by Sean Hello

    262

    components

    Aceternity UI

    Aceternity UI

    by Manu Arora

    89

    components

    Dali Agents

    Dali Agents

    by Liana Pepanyan

    46

    components

    About Layouts

    Layouts is a component library on 21st.dev by 0xUrvish with 24 public React components. Every component ships with a live interactive preview and full TSX source — copy the code, install it through the shadcn CLI, or pull it into Cursor or Claude Code over MCP.

    All 24 Layouts components

    • Animated Collection
    • Bento Card
    • Bottom Menu
    • Bucket
    • Day Picker
    • Delete Button
    • Discover Button
    • Discrete Tab
    • Dynamic Toolbar
    • Empty Testimonial
    • Expandable Gallery
    • Feature Carousel

    Browse all component libraries →

    Fluid Expanding Grid
  • Folder Interaction
  • Inline Edit
  • List Item
  • Magnified Bento
  • Morphing Input
  • Multi-Step Form
  • Pricing Card
  • Smooth Dropdown
  • Stacked List x
  • Status Button
  • Vertical Tabs