# ui-layouts/uilayouts

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/ui-layouts-uilayouts).**

3,190 stars · 175 forks · TypeScript · mit

## Links

- GitHub: https://github.com/ui-layouts/uilayouts
- Homepage: https://www.ui-layouts.com
- awesome-repositories: https://awesome-repositories.com/repository/ui-layouts-uilayouts.md

## Topics

`accertinity` `accordion-component` `animated-tabs` `codehike` `component-library` `components` `components-react` `drawer` `framer-motion` `image-mousetrail` `modal` `mouse-animation` `mousetrail` `react` `react-animation-components` `shadcn` `shadcnui` `sparkles` `spotlight` `tailwindcss`

## Description

uillayouts is a comprehensive design system consisting of interactive components, responsive templates, motion-enhanced UI kits, and advanced visual effect toolkits. It provides a collection of accessible React UI components and pre-designed layout sections for landing pages.

The project is distinguished by a specialized visual effects library and motion-driven components. It features high-performance graphical enhancements such as glassmorphism, mesh gradients, noise overlays, and SVG masking, alongside interactive elements that utilize physics-based animations and cursor-tracking effects.

The library covers a broad surface of interface needs, including adaptive navigation systems, animated form elements, and data display tools like bento grids. It also includes structural templates for hero sections, portfolios, and pricing tables, as well as complex motion primitives for scroll-triggered reveals and dynamic text transitions.

## Tags

### User Interface & Experience

- [UI Component Libraries](https://awesome-repositories.com/f/user-interface-experience/ui-component-libraries.md) — Provides a comprehensive design system of motion-enhanced UI components, templates, and visual effect toolkits. ([source](https://cdn.jsdelivr.net/gh/ui-layouts/uilayouts@main/README.md))
- [Animated UI Components](https://awesome-repositories.com/f/user-interface-experience/ui-component-libraries/animated-ui-components.md) — Provides a comprehensive library of animated UI components featuring smooth transitions and scroll-triggered reveals.
- [Accessible Component Libraries](https://awesome-repositories.com/f/user-interface-experience/accessible-component-libraries.md) — Ships a library of accessible interface elements optimized for compliance and easy copy-and-paste integration. ([source](https://www.ui-layouts.com/components))
- [Buttons](https://awesome-repositories.com/f/user-interface-experience/buttons.md) — Provides a collection of customizable buttons with built-in animations and interactive hover states. ([source](https://www.ui-layouts.com/r/registry.json))
- [React Components](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components.md) — Offers a collection of accessible, customizable React interface elements available for copy-and-paste integration.
- [Scroll-Triggered Animations](https://awesome-repositories.com/f/user-interface-experience/declarative-animations/scroll-triggered-animations.md) — Executes visual transitions and staggering effects when elements intersect the viewport during scrolling.
- [Physics-Based Interactions](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/general-interaction-frameworks/interaction-libraries/physics-based-interactions.md) — Implements physics-based interactions like friction and mass for organic draggable elements and cursor tracking.
- [Glassmorphism Styling](https://awesome-repositories.com/f/user-interface-experience/glassmorphism-styling.md) — Provides high-performance glassmorphism elements featuring frosted glass aesthetics, backdrop blur, and transparency. ([source](https://www.ui-layouts.com/components/liquid-glass))
- [Navigation Headers](https://awesome-repositories.com/f/user-interface-experience/navigation-headers.md) — Implements a navigation header that adapts its layout between desktop dialogs and mobile drawers. ([source](https://www.ui-layouts.com/components/responsive-header))
- [Mesh Gradients](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-layout-styling/gradient-backgrounds/mesh-gradients.md) — Generates fluid, multi-color animated mesh gradients for high-performance background visuals. ([source](https://www.ui-layouts.com/components/mesh-gradients))
- [Responsive Grid Systems](https://awesome-repositories.com/f/user-interface-experience/responsive-grid-systems.md) — Implements a flexible grid system that adapts UI components across different screen sizes. ([source](https://www.ui-layouts.com/components/grid))
- [Scroll Animations](https://awesome-repositories.com/f/user-interface-experience/scroll-animations.md) — Triggers directional transitions and fade-in effects as content enters the browser viewport. ([source](https://www.ui-layouts.com/components/scroll-animation))
- [Tabbed Interfaces](https://awesome-repositories.com/f/user-interface-experience/tabbed-interfaces.md) — Renders a tabbed interface featuring a sliding background indicator for active states. ([source](https://www.ui-layouts.com/components/tabs))
- [Blur Effects](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/blur-effects.md) — Implements soft-edge blur overlays and Gaussian filters to achieve a modern glassmorphism aesthetic. ([source](https://www.ui-layouts.com/components/blur-vignette))
- [Image Masking](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/image-masking.md) — Applies custom SVG and CSS clip-paths to images to create non-rectangular geometric presentations. ([source](https://www.ui-layouts.com/components/clip-path))
- [Physics-Based Animations](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/physics-motion-dynamics/physics-based-animations.md) — Implements draggable interface elements that move freely using physics-based motion models. ([source](https://www.ui-layouts.com/components/drag-items))
- [Staggered Reveal Sequences](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/timeline-sequence-management/animation-timelines/staggered-reveal-sequences.md) — Animates sequential content sections using staggering effects as they enter the viewport. ([source](https://www.ui-layouts.com/components/timeline-animation))
- [Particle](https://awesome-repositories.com/f/user-interface-experience/animation-libraries/particle.md) — Provides high-performance particle systems for creating glowing visual depth and atmospheric noise overlays.
- [Interactive Grid Backgrounds](https://awesome-repositories.com/f/user-interface-experience/background-components/interactive-grid-backgrounds.md) — Creates responsive grids of blocks with customizable active states and hover animations as background elements. ([source](https://www.ui-layouts.com/components/blocks))
- [CSS Filter Effects](https://awesome-repositories.com/f/user-interface-experience/background-effects/background-visual-effects/canvas-visual-effects/css-filter-effects.md) — Utilizes CSS backdrop filtering to create glassmorphism effects with blur and transparency.
- [Responsive Layout Transitions](https://awesome-repositories.com/f/user-interface-experience/background-effects/background-visual-effects/direction-aware-drawer-effects/responsive-layout-transitions.md) — Provides a collapsible navigation drawer that smoothly transitions between mobile and desktop views. ([source](https://www.ui-layouts.com/components/directional-drawer))
- [Video Surface Visual Effects](https://awesome-repositories.com/f/user-interface-experience/background-effects/background-visual-effects/video-surface-visual-effects.md) — Applies SVG shapes and cutouts to video elements using CSS masking for specialized surface effects. ([source](https://www.ui-layouts.com/components/video-masking))
- [Gradient Borders](https://awesome-repositories.com/f/user-interface-experience/border-utilities/gradient-borders.md) — Provides customizable gradient borders for containers and text to enhance visual depth. ([source](https://www.ui-layouts.com/components/gradient-border))
- [Stacked Transitions](https://awesome-repositories.com/f/user-interface-experience/card-layouts/stacked-transitions.md) — Implements a visual effect where overlapping cards animate and layer during transitions. ([source](https://www.ui-layouts.com/components/smooth-scroll))
- [Carousel Transition Effects](https://awesome-repositories.com/f/user-interface-experience/carousel-transition-effects.md) — Implements a sliding item carousel with dynamic transitions for navigation. ([source](https://www.ui-layouts.com/components/progressive-carousel))
- [Animated FAQ Lists](https://awesome-repositories.com/f/user-interface-experience/collapse-sections/animated-faq-lists.md) — Provides an interactive FAQ section with smooth expanding and collapsing animations. ([source](https://www.ui-layouts.com/components/faqs))
- [Color Pickers](https://awesome-repositories.com/f/user-interface-experience/color-pickers.md) — Provides an interactive color picker interface supporting RGB, HSV, and hex values with a hue slider. ([source](https://www.ui-layouts.com/components/color-picker))
- [Content Carousels](https://awesome-repositories.com/f/user-interface-experience/content-display-components/content-carousels.md) — Provides interactive components that cycle through a series of content elements with smooth transitions. ([source](https://www.ui-layouts.com/components/carousel))
- [Date and Time Pickers](https://awesome-repositories.com/f/user-interface-experience/date-and-time-pickers.md) — Implements a calendar interface and input field for selecting specific dates and times. ([source](https://www.ui-layouts.com/components/datetime-picker))
- [Expanding Content Cells](https://awesome-repositories.com/f/user-interface-experience/expanding-content-cells.md) — Ships content cards that trigger smooth animations to expand and reveal detailed images and text. ([source](https://www.ui-layouts.com/components/linear-modal))
- [FAQ Layouts](https://awesome-repositories.com/f/user-interface-experience/faq-layouts.md) — Provides question-and-answer layouts using tabbed explorers, glass cards, and minimalistic lists. ([source](https://www.ui-layouts.com/blocks/faq-section))
- [Drag-and-Drop File Upload](https://awesome-repositories.com/f/user-interface-experience/file-uploaders/drag-and-drop-file-upload.md) — Provides a drag-and-drop file upload interface featuring progress indicators and real-time media previews. ([source](https://www.ui-layouts.com/components/file-upload))
- [Footers](https://awesome-repositories.com/f/user-interface-experience/footers.md) — Offers pre-designed website footer templates ranging from minimal lists to bento grids. ([source](https://www.ui-layouts.com/blocks/footer-section))
- [Hero Sections](https://awesome-repositories.com/f/user-interface-experience/hero-sections.md) — Provides visually striking landing page hero section templates with diverse layout styles. ([source](https://www.ui-layouts.com/blocks/hero-section))
- [Horizontal Navigation Sliders](https://awesome-repositories.com/f/user-interface-experience/horizontal-scrolling-utilities/horizontal-navigation-sliders.md) — Implements a scrollable list with an animating background indicator that slides between tabs. ([source](https://www.ui-layouts.com/components/horizontal-scroll))
- [Accordion Image Galleries](https://awesome-repositories.com/f/user-interface-experience/hover-galleries/accordion-image-galleries.md) — Provides an interactive image accordion gallery that expands elements to reveal associated content. ([source](https://www.ui-layouts.com/components/image-accordions))
- [Hover Card Displays](https://awesome-repositories.com/f/user-interface-experience/hover-previews/hover-card-displays.md) — Implements floating cards that appear on mouseover with custom animations and visual effects. ([source](https://www.ui-layouts.com/components/hover-cards))
- [Animated Gallery Modals](https://awesome-repositories.com/f/user-interface-experience/image-display-components/animated-gallery-modals.md) — Displays collections of images that open in an animated modal window. ([source](https://www.ui-layouts.com/components/gallery-modal))
- [Animated Image Tabs](https://awesome-repositories.com/f/user-interface-experience/image-display-components/animated-image-tabs.md) — A feature for the product to switch between image galleries and associated text content using smooth transitions. ([source](https://www.ui-layouts.com/components/image-tabs))
- [Cursor-Driven Image Reveals](https://awesome-repositories.com/f/user-interface-experience/image-transition-effects/cursor-driven-image-reveals.md) — Displays images that follow and reveal themselves based on the cursor position when hovering. ([source](https://www.ui-layouts.com/components/image-reveal))
- [Animated Identity Marks](https://awesome-repositories.com/f/user-interface-experience/interaction-effects/motion-effects/animated-identity-marks.md) — Provides stylized identity marks and logos using motion effects to enhance brand recognition. ([source](https://www.ui-layouts.com/docs/components-json))
- [Landing Page Templates](https://awesome-repositories.com/f/user-interface-experience/landing-page-templates.md) — Provides responsive layout templates for landing pages, including hero headers and bento grids.
- [Product Showcases](https://awesome-repositories.com/f/user-interface-experience/landing-page-templates/product-showcases.md) — Implements layouts for highlighting product capabilities using bento grids and flow displays. ([source](https://www.ui-layouts.com/blocks/feature-section))
- [Masonry Layouts](https://awesome-repositories.com/f/user-interface-experience/layout-containers/masonry-layouts.md) — Provides a dynamic grid layout that automatically fills vertical gaps for items of variable heights. ([source](https://www.ui-layouts.com/components/masonary-grid))
- [Responsive Modals](https://awesome-repositories.com/f/user-interface-experience/modal-dialogs/responsive-modals.md) — Implements modal components that adapt their layout between mobile app drawers and desktop sliding panels. ([source](https://www.ui-layouts.com/components/responsive-modal))
- [Modal Overlays](https://awesome-repositories.com/f/user-interface-experience/overlay-dialogs/modal-overlays.md) — Provides modal overlays with smooth transitions and interactive effects for focused user interaction. ([source](https://www.ui-layouts.com/components/dialog))
- [Media Lightboxes](https://awesome-repositories.com/f/user-interface-experience/overlay-dialogs/modal-overlays/media-lightboxes.md) — Ships animated overlays specifically designed to display images and videos with responsive scaling. ([source](https://www.ui-layouts.com/components/media-modal))
- [Password Input Fields](https://awesome-repositories.com/f/user-interface-experience/password-input-fields.md) — Ships secure password input fields with visibility toggles and real-time strength validation. ([source](https://www.ui-layouts.com/components/password))
- [Phone Number Inputs](https://awesome-repositories.com/f/user-interface-experience/phone-number-inputs.md) — Implements phone number input fields with integrated country code selection and automatic formatting. ([source](https://www.ui-layouts.com/components/phone-input))
- [Pricing Table Layouts](https://awesome-repositories.com/f/user-interface-experience/pricing-table-layouts.md) — Offers pre-designed layout templates for showcasing subscription plans and product packs. ([source](https://www.ui-layouts.com/blocks/pricing-section))
- [Spotlight Effect Cards](https://awesome-repositories.com/f/user-interface-experience/radial-menus/spotlight-effect-cards.md) — Renders cards with radial gradient lighting effects that follow the mouse cursor. ([source](https://www.ui-layouts.com/components/spotlight-cards))
- [Range Sliders](https://awesome-repositories.com/f/user-interface-experience/range-sliders.md) — Ships animated range sliders for selecting single or multiple numeric values with smooth transitions. ([source](https://www.ui-layouts.com/components/range-slider))
- [Scrolling Text Banners](https://awesome-repositories.com/f/user-interface-experience/scrolling-text-banners.md) — Renders a continuous looping marquee for text, images, and videos with adjustable speeds. ([source](https://www.ui-layouts.com/components/marquee))
- [Scroll-Responsive Marquees](https://awesome-repositories.com/f/user-interface-experience/scrolling-text-banners/scroll-responsive-marquees.md) — Implements horizontal text marquees that adjust their movement speed based on user scroll position. ([source](https://www.ui-layouts.com/components/scroll-text-marquee))
- [Tagging Selectors](https://awesome-repositories.com/f/user-interface-experience/selectable-lists/multiple-selections/completion-multi-selections/result-list-multi-selections/tagging-selectors.md) — Provides an interface to search, tag, and select multiple options from a list. ([source](https://www.ui-layouts.com/components/multi-selector))
- [Sticky Elements](https://awesome-repositories.com/f/user-interface-experience/sticky-elements.md) — Provides components that remain fixed within a container while the rest of the page scrolls. ([source](https://www.ui-layouts.com/components/sticky-scroll))
- [Magnified Navigation Docks](https://awesome-repositories.com/f/user-interface-experience/tab-bar-customizers/magnified-navigation-docks.md) — Creates an interactive navigation dock that expands items on hover using magnification. ([source](https://www.ui-layouts.com/components/magnified-doc))
- [Team Showcase Sections](https://awesome-repositories.com/f/user-interface-experience/team-showcase-sections.md) — Displays curated lists of team members using grid layouts and custom clip paths. ([source](https://www.ui-layouts.com/blocks/team-section))
- [Testimonial Layouts](https://awesome-repositories.com/f/user-interface-experience/testimonial-layouts.md) — Displays customer reviews through a variety of carousels, grids, and marquees. ([source](https://www.ui-layouts.com/blocks/testimonial-section))
- [Texture Overlays](https://awesome-repositories.com/f/user-interface-experience/texture-overlays.md) — Ships an adjustable textured grain layer to add visual depth and atmosphere to the user interface. ([source](https://www.ui-layouts.com/components/noise))
- [Organic 3D Shapes](https://awesome-repositories.com/f/user-interface-experience/ui-animations/3d-depth-effects/organic-3d-shapes.md) — Displays smooth, organic 3D animated blobs that evolve in real-time for background visual depth. ([source](https://www.ui-layouts.com/components/r3f-blob))

### Graphics & Multimedia

- [UI Visual Effects Toolkits](https://awesome-repositories.com/f/graphics-multimedia/ui-visual-effects-toolkits.md) — Provides a toolkit for advanced UI effects including glassmorphism, mesh gradients, and noise overlays.
- [Image Displacement Effects](https://awesome-repositories.com/f/graphics-multimedia/animation-motion/animated-image-rendering/animated-image-manipulation/image-displacement-effects.md) — Renders images with water-like ripple animations using a high-performance graphics engine. ([source](https://www.ui-layouts.com/components/image-ripple-effect))
- [Typography Particle Effects](https://awesome-repositories.com/f/graphics-multimedia/canvas-visual-effects-engines/particle-effect-simulations/typography-particle-effects.md) — Adds dynamic sparkling particle effects to headings with configurable density and speed. ([source](https://www.ui-layouts.com/components/sparkles-title))
- [Coordinate-Based Lighting](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/lighting-systems/3d-lighting-models/advanced-lighting-effects/coordinate-based-lighting.md) — Implements radial gradient lighting that tracks mouse coordinates to create interactive spotlight effects.
- [Interactive 3D Globes](https://awesome-repositories.com/f/graphics-multimedia/interactive-3d-globes.md) — Provides an interactive 3D animated globe with customizable rotations for geographic visualizations. ([source](https://www.ui-layouts.com/components/globe))
- [Cursor-Tracking Image Effects](https://awesome-repositories.com/f/graphics-multimedia/interactive-image-viewers/cursor-tracking-image-effects.md) — Implements image mousetrails where visual elements track the user's cursor movement with smooth animations. ([source](https://www.ui-layouts.com/components/image-mousetrail))
- [UI Sparkle Particles](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/visual-effects/particle-effects/ui-sparkle-particles.md) — Provides glowing particle effects to highlight specific interface sections for visual emphasis. ([source](https://www.ui-layouts.com/components/sparkles))
- [SVG and CSS Masking](https://awesome-repositories.com/f/graphics-multimedia/svg-and-css-masking.md) — Renders images and videos within custom non-rectangular shapes using SVG paths and CSS clip-paths.
- [Character Cycle Transitions](https://awesome-repositories.com/f/graphics-multimedia/text-reveal-effects/character-cycle-transitions.md) — Provides futuristic text animations that cycle through random characters before revealing the final string. ([source](https://www.ui-layouts.com/components/randomized-text-effect))

### Web Development

- [Interactive Web Component Libraries](https://awesome-repositories.com/f/web-development/interactive-web-component-libraries.md) — Ships a set of motion-enhanced interactive components including carousels, sliders, and physics-based draggable interfaces.

### Part of an Awesome List

- [Collapsible Navigation Sidebars](https://awesome-repositories.com/f/awesome-lists/devtools/navigation-and-menus/collapsible-navigation-sidebars.md) — Implements navigation panels with collapsible states that adapt between mobile drawers and desktop sidebars. ([source](https://www.ui-layouts.com/components/motion-drawer))
- [Chip Input Fields](https://awesome-repositories.com/f/awesome-lists/devtools/text-inputs/chip-input-fields.md) — Provides an input field that transforms text into removable chips using keyboard shortcuts. ([source](https://www.ui-layouts.com/components/tags-input))

### Business & Productivity Software

- [Product Display Cards](https://awesome-repositories.com/f/business-productivity-software/price-list-management/pricing-trackers/product-price-comparators/product-display-cards.md) — Provides configurable layouts for displaying product images, pricing, and descriptions. ([source](https://www.ui-layouts.com/components/product-cards))

### Data & Databases

- [Bento Grid Metrics](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/embeddable-metric-visualizers/bento-grid-metrics.md) — Implements numerical statistics and data highlights rendered through high-impact banners and bento grids. ([source](https://www.ui-layouts.com/blocks/stats-section))

### Software Engineering & Architecture

- [Visual State Transitions](https://awesome-repositories.com/f/software-engineering-architecture/state-transition-models/visual-state-transitions.md) — Manages visual transitions between different UI states, such as expanding cards and collapsing drawers.