---
name: "@ui-layouts"
slug: "ui-layouts"
description: "An open-source creative component library focused on advanced animations and visual effects for React/Next.js, built primarily with Framer Motion (motion) and Tailwind CSS. Components include R3F Blob (Three.js), Image Ripple Effect, Image Mousetrail, Image Reveal, Blur Vignette, Liquid Glass, Liquid Gradient, Mesh Gradients, Shimmer Loader, Motion Number, Drag Items, Horizontal Scroll, Globe, Marquee, Randomized Text Effect, Color Picker, Directional Drawer, Motion Drawer, Gallery Modal, and more — totalling 40+ unique effects. Also includes a Labs section for experiments. Free and open source. Use for: marketing sites, portfolios, and creative web apps that need striking motion effects and interactive visual components beyond standard Tailwind utility patterns."
category: "Animated components"
tags: ["3d", "aesthetic", "animation", "backgrounds", "blocks", "buttons", "cards", "design-system", "forms", "glassmorphism", "hooks", "icons", "loaders", "maps", "marketing", "media", "mobile", "navigation", "overlays", "payments", "pro-available", "saas", "text-effects"]
framework: "react"
license: "MIT"
author: "ui-layouts"
website: "https://ui-layouts.com/"
github: "https://github.com/ui-layouts/uilayouts"
registry: "https://ui-layouts.com/r/registry.json"
pro: true
pro_url: "https://www.ui-layouts.com/pricing"
github_stars: 3510
component_count: 250
generated_at: "2026-07-28T08:59:05.895Z"
---

# @ui-layouts

An open-source creative component library focused on advanced animations and visual effects for React/Next.js, built primarily with Framer Motion (motion) and Tailwind CSS. Components include R3F Blob (Three.js), Image Ripple Effect, Image Mousetrail, Image Reveal, Blur Vignette, Liquid Glass, Liquid Gradient, Mesh Gradients, Shimmer Loader, Motion Number, Drag Items, Horizontal Scroll, Globe, Marquee, Randomized Text Effect, Color Picker, Directional Drawer, Motion Drawer, Gallery Modal, and more — totalling 40+ unique effects. Also includes a Labs section for experiments. Free and open source. Use for: marketing sites, portfolios, and creative web apps that need striking motion effects and interactive visual components beyond standard Tailwind utility patterns.

## Links

- Website: https://ui-layouts.com/
- GitHub: https://github.com/ui-layouts/uilayouts
- Registry JSON: https://ui-layouts.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/ui-layouts
- This file: https://sh4dcn.vercel.app/md/ui-layouts.md
- Pro / pricing: https://www.ui-layouts.com/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ui-layouts.com/r/registry.json
pnpm dlx shadcn@latest add https://ui-layouts.com/r/registry.json
bunx shadcn@latest add https://ui-layouts.com/r/registry.json
# clone the source repo
git clone https://github.com/ui-layouts/uilayouts.git
# fetch the raw registry index
curl -s https://ui-layouts.com/r/registry.json
```

## Components (250)

| name | type | description | install |
| --- | --- | --- | --- |
| btn-bg-shine | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/btn-bg-shine.json` |
| btn-animated-gradient | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/btn-animated-gradient.json` |
| button-active | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/button-active.json` |
| button-hover-right | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/button-hover-right.json` |
| btn-creative-right | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/btn-creative-right.json` |
| btn-creative-top | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/btn-creative-top.json` |
| btn-click-down | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/btn-click-down.json` |
| btn-hover-down | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/btn-hover-down.json` |
| btn-hover-multiple | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/btn-hover-multiple.json` |
| btn-hover-underline | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/btn-hover-underline.json` |
| btn-hover-top-flip | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/btn-hover-top-flip.json` |
| btn-hover-left-flip | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/btn-hover-left-flip.json` |
| btn-hover-top-slowflip | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/btn-hover-top-slowflip.json` |
| btn-text-change | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/btn-text-change.json` |
| btn-cross-arrow | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/btn-cross-arrow.json` |
| btn-black-shadow | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/btn-black-shadow.json` |
| btn-hover-outline | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/btn-hover-outline.json` |
| btn-arrow-right | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/btn-arrow-right.json` |
| btn-rotating-gradient | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/btn-rotating-gradient.json` |
| color-picker | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/color-picker.json` |
| default-color-picker | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/default-color-picker.json` |
| raws-color-picker | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/raws-color-picker.json` |
| motion-number-upvotes | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/motion-number-upvotes.json` |
| motion-number-input | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/motion-number-input.json` |
| motion-number-slider | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/motion-number-slider.json` |
| number-flow-trading | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/number-flow-trading.json` |
| noise-effect | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/noise-effect.json` |
| scroll-text | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/scroll-text.json` |
| text-scroll-animation | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/text-scroll-animation.json` |
| scroll-text-marquee | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/scroll-text-marquee.json` |
| scroll-text-marquee-unidirectional | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/scroll-text-marquee-unidirectional.json` |
| scroll-text-marquee-bidirectional | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/scroll-text-marquee-bidirectional.json` |
| randomized-text-effect | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/randomized-text-effect.json` |
| randomized-text-unveil | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/randomized-text-unveil.json` |
| globe | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/globe.json` |
| card-globe | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/card-globe.json` |
| card-globe-white | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/card-globe-white.json` |
| img-ripple-effect | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/img-ripple-effect.json` |
| r3f-blob | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/r3f-blob.json` |
| mesh-shadergradient | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/mesh-shadergradient.json` |
| mesh-gradient-background3 | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/mesh-gradient-background3.json` |
| mesh-gradient-background2 | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/mesh-gradient-background2.json` |
| mesh-gradient-background | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/mesh-gradient-background.json` |
| animated-logo-footer | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/animated-logo-footer.json` |
| hover-footer | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/hover-footer.json` |
| responsive-header | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/responsive-header.json` |
| responsive-header-default | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/responsive-header-default.json` |
| boxgrid | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/boxgrid.json` |
| conditionGrid | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/conditionGrid.json` |
| normalGrid | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/normalGrid.json` |
| buyme-acoffee | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/buyme-acoffee.json` |
| stripecard | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/stripecard.json` |
| creative-hover-card | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/creative-hover-card.json` |
| stripecard2 | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/stripecard2.json` |
| hovercard1 | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/hovercard1.json` |
| hovercard2 | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/hovercard2.json` |
| hovercard3 | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/hovercard3.json` |
| hovercard4 | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/hovercard4.json` |
| productcard1 | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/productcard1.json` |
| productcard2 | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/productcard2.json` |
| productcard3 | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/productcard3.json` |
| productcard4 | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/productcard4.json` |
| productcard5 | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/productcard5.json` |
| productcard6 | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/productcard6.json` |
| creative-clippath | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/creative-clippath.json` |
| corporate-clippath | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/corporate-clippath.json` |
| symbolic-clippath | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/symbolic-clippath.json` |
| creative-mask-clippath | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/creative-mask-clippath.json` |
| watersplash-clippath | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/watersplash-clippath.json` |
| creative-imagemasking | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/creative-imagemasking.json` |
| animal-imagemasking | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/animal-imagemasking.json` |
| watersplash-imagemasking | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/watersplash-imagemasking.json` |
| center-imagemasking | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/center-imagemasking.json` |
| fixedbg-imagemasking | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/fixedbg-imagemasking.json` |
| creative-videomasking | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/creative-videomasking.json` |
| splashwater-videomasking | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/splashwater-videomasking.json` |
| textoverlay-videomasking | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/textoverlay-videomasking.json` |
| hexagon-videomasking | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/hexagon-videomasking.json` |
| hexagon2-videomasking | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/hexagon2-videomasking.json` |
| progressive-carousel | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/progressive-carousel.json` |
| horizontal-progressive-carousel | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/horizontal-progressive-carousel.json` |
| vertical-progressive-carousel | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/vertical-progressive-carousel.json` |
| image-hover-accordion | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/image-hover-accordion.json` |
| tailwind-image-accordion | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/tailwind-image-accordion.json` |
| image-tab1 | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/image-tab1.json` |
| image-tab2 | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/image-tab2.json` |
| img-tabs-standalone | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/img-tabs-standalone.json` |
| magnified-doc | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/magnified-doc.json` |
| magnified-tab | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/magnified-tab.json` |
| tabs | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/tabs.json` |
| animated-tabs | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/animated-tabs.json` |
| creative-tab | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/creative-tab.json` |
| register-tab | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/register-tab.json` |
| swapy | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/swapy.json` |
| default-swapy | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/default-swapy.json` |
| opacity-swapy | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/opacity-swapy.json` |
| swapy-handle | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/swapy-handle.json` |
| swapy-without-components | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/swapy-without-components.json` |
| drag-items | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/drag-items.json` |
| timeline-animation | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/timeline-animation.json` |
| timeline-animation-default | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/timeline-animation-default.json` |
| scroll-animation | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/scroll-animation.json` |
| scroll-animation-default | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/scroll-animation-default.json` |
| scroll-animation-repeat | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/scroll-animation-repeat.json` |
| scroll-animation-text | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/scroll-animation-text.json` |
| mousetrail | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/mousetrail.json` |
| image-mousetrail-default | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/image-mousetrail-default.json` |
| image-mousetrail-small | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/image-mousetrail-small.json` |
| image-mousetrail-disappear | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/image-mousetrail-disappear.json` |
| image-mousetrail-without-component | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/image-mousetrail-without-component.json` |
| horizontal-scroll | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/horizontal-scroll.json` |
| framerhorizontalscroll | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/framerhorizontalscroll.json` |
| stacking-card | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/stacking-card.json` |
| css-image-stacking | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/css-image-stacking.json` |
| css-card-stacking | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/css-card-stacking.json` |
| smooth-scroll | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/smooth-scroll.json` |
| sticky-gallery | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/sticky-gallery.json` |
| sticky-hero-section | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/sticky-hero-section.json` |
| sparkles | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/sparkles.json` |
| sparkles-globe | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/sparkles-globe.json` |
| sparkles-section | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/sparkles-section.json` |
| sparkles-title | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/sparkles-title.json` |
| sparkles-title2 | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/sparkles-title2.json` |
| sparkles-title3 | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/sparkles-title3.json` |
| sparkles-title4 | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/sparkles-title4.json` |
| sparkles-branding | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/sparkles-branding.json` |
| marquee | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/marquee.json` |
| default-marquee | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/default-marquee.json` |
| verticle-marquee | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/verticle-marquee.json` |
| logos-marquee | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/logos-marquee.json` |
| 3d-marquee | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/3d-marquee.json` |
| infintyband | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/infintyband.json` |
| liquid-glass | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/liquid-glass.json` |
| liquid-glass-weather | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/liquid-glass-weather.json` |
| liquid-glass-mobile-icons | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/liquid-glass-mobile-icons.json` |
| liquid-glass-notification | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/liquid-glass-notification.json` |
| liquid-glass-sidebar-menu | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/liquid-glass-sidebar-menu.json` |
| blur-vignette | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/blur-vignette.json` |
| video-blur-vignette | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/video-blur-vignette.json` |
| blur-vignette-video | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/blur-vignette-video.json` |
| blur-vignette-img | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/blur-vignette-img.json` |
| blur-vignette-card | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/blur-vignette-card.json` |
| liquid-gradient | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/liquid-gradient.json` |
| liquid-gradient-components | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/liquid-gradient-components.json` |
| liquid-button | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/liquid-button.json` |
| accordion | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/accordion.json` |
| grid-layout-accordion | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/grid-layout-accordion.json` |
| single-layout-accordion | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/single-layout-accordion.json` |
| multi-layout-accordion | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/multi-layout-accordion.json` |
| faq-accordion | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/faq-accordion.json` |
| slider | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/slider.json` |
| dual-range-slider | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/dual-range-slider.json` |
| position-range-slider | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/position-range-slider.json` |
| static-range-slider | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/static-range-slider.json` |
| showhide-pass | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/showhide-pass.json` |
| pass-strengthindicator | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/pass-strengthindicator.json` |
| pass-strength-dotted-indicator | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/pass-strength-dotted-indicator.json` |
| pass-strength-hover-indicator | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/pass-strength-hover-indicator.json` |
| pass-strength-inline-indicator | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/pass-strength-inline-indicator.json` |
| confirm-pass-check | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/confirm-pass-check.json` |
| tags-input | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/tags-input.json` |
| tags-input-components | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/tags-input-components.json` |
| tags-input-no-edit | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/tags-input-no-edit.json` |
| phone-input-default | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/phone-input-default.json` |
| phone-input | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/phone-input.json` |
| datetime-input | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/datetime-input.json` |
| datetime-input-default | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/datetime-input-default.json` |
| time-picker | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/time-picker.json` |
| date-picker | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/date-picker.json` |
| multi-selector | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/multi-selector.json` |
| multi-selector-default | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/multi-selector-default.json` |
| file-upload | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/file-upload.json` |
| file-upload-default | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/file-upload-default.json` |
| chat-form-dropzone | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/chat-form-dropzone.json` |
| imgpreview-dropzone | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/imgpreview-dropzone.json` |
| linear-modal | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/linear-modal.json` |
| linear-modal-default | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/linear-modal-default.json` |
| linear-modal-center-content | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/linear-modal-center-content.json` |
| linear-modal-standalone | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/linear-modal-standalone.json` |
| gallery-modal-accordion | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/gallery-modal-accordion.json` |
| gallery-modal-unsplash | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/gallery-modal-unsplash.json` |
| gallery-modal-slider | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/gallery-modal-slider.json` |
| dialog | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/dialog.json` |
| dialog-default | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/dialog-default.json` |
| media-modal | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/media-modal.json` |
| media-modal-default | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/media-modal-default.json` |
| imagemodals | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/imagemodals.json` |
| responsive-modal | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/responsive-modal.json` |
| responsive-modal-default | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/responsive-modal-default.json` |
| directional-drawer | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/directional-drawer.json` |
| directional-drawer_default | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/directional-drawer_default.json` |
| left-directional-drawer | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/left-directional-drawer.json` |
| top-directional-drawer | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/top-directional-drawer.json` |
| bottom-directional-drawer | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/bottom-directional-drawer.json` |
| motion-drawer | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/motion-drawer.json` |
| motion-drawer-default | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/motion-drawer-default.json` |
| right-motion-drawer | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/right-motion-drawer.json` |
| spotlight | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/spotlight.json` |
| spotlight-card1 | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/spotlight-card1.json` |
| spotlight-card2 | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/spotlight-card2.json` |
| spotlight-card3 | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/spotlight-card3.json` |
| spotlight-card4 | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/spotlight-card4.json` |
| image-reveal | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/image-reveal.json` |
| image-reveal2 | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/image-reveal2.json` |
| bg-blocks-one | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/bg-blocks-one.json` |
| animated-beam | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/animated-beam.json` |
| animated-beam-default | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/animated-beam-default.json` |
| animated-beam-bidirectional | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/animated-beam-bidirectional.json` |
| animated-beam-unidirectional | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/animated-beam-unidirectional.json` |
| animated-beam-multiple-input | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/animated-beam-multiple-input.json` |
| animated-beam-multiple-output | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/animated-beam-multiple-output.json` |
| carousel | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/carousel.json` |
| default-slider | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/default-slider.json` |
| align-slider | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/align-slider.json` |
| classname-slider | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/classname-slider.json` |
| number-slider | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/number-slider.json` |
| scale-slider | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/scale-slider.json` |
| thumbnail-slider | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/thumbnail-slider.json` |
| autostart-slider | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/autostart-slider.json` |
| autoscroll-slider | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/autoscroll-slider.json` |
| vertical-slider | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/vertical-slider.json` |
| vertical-thumbnail-slider | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/vertical-thumbnail-slider.json` |
| vertical-thumbnail-autostart-slider | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/vertical-thumbnail-autostart-slider.json` |
| framer-normal-carousel | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/framer-normal-carousel.json` |
| framer-draggable-carousel | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/framer-draggable-carousel.json` |
| framer-autoplay-carousel | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/framer-autoplay-carousel.json` |
| framer-multi-carousel | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/framer-multi-carousel.json` |
| framer-thumnbails | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/framer-thumnbails.json` |
| framer-moveable-thumbnails | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/framer-moveable-thumbnails.json` |
| framer-drag-sliding-carousel | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/framer-drag-sliding-carousel.json` |
| code-block | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/code-block.json` |
| tree-code-viewer | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/tree-code-viewer.json` |
| code-tabs-mdx | registry:component | — | `npx shadcn@latest add https://ui-layouts.com/r/code-tabs-mdx.json` |
| hero-digital-success | registry:block | — | `npx shadcn@latest add https://ui-layouts.com/r/hero-digital-success.json` |
| hero-ai-value-proposition | registry:block | — | `npx shadcn@latest add https://ui-layouts.com/r/hero-ai-value-proposition.json` |
| hero-share-app | registry:block | — | `npx shadcn@latest add https://ui-layouts.com/r/hero-share-app.json` |
| hero-social-app | registry:block | — | `npx shadcn@latest add https://ui-layouts.com/r/hero-social-app.json` |
| hero-ai-ecommerce | registry:block | — | `npx shadcn@latest add https://ui-layouts.com/r/hero-ai-ecommerce.json` |
| hero-ai-infrastructure | registry:block | — | `npx shadcn@latest add https://ui-layouts.com/r/hero-ai-infrastructure.json` |
| hero-financial | registry:block | — | `npx shadcn@latest add https://ui-layouts.com/r/hero-financial.json` |
| feature-flow | registry:block | — | `npx shadcn@latest add https://ui-layouts.com/r/feature-flow.json` |
| feature-hero | registry:block | — | `npx shadcn@latest add https://ui-layouts.com/r/feature-hero.json` |
| feature-bento | registry:block | — | `npx shadcn@latest add https://ui-layouts.com/r/feature-bento.json` |
| feature-nature | registry:block | — | `npx shadcn@latest add https://ui-layouts.com/r/feature-nature.json` |
| feature-velocity | registry:block | — | `npx shadcn@latest add https://ui-layouts.com/r/feature-velocity.json` |
| feature-highlights | registry:block | — | `npx shadcn@latest add https://ui-layouts.com/r/feature-highlights.json` |
| feature-platform | registry:block | — | `npx shadcn@latest add https://ui-layouts.com/r/feature-platform.json` |
| feature-service | registry:block | — | `npx shadcn@latest add https://ui-layouts.com/r/feature-service.json` |
| about-ecommerse | registry:block | — | `npx shadcn@latest add https://ui-layouts.com/r/about-ecommerse.json` |
| about-creative | registry:block | — | `npx shadcn@latest add https://ui-layouts.com/r/about-creative.json` |

## For AI agents

```text
You are adding components from @ui-layouts to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/ui-layouts.md) for the component list.
2. Fetch the machine-readable index: https://ui-layouts.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: ui-layouts).
```