# ui-layouts

> Canonical: https://www.ui-layouts.com
> Extended index: https://www.ui-layouts.com/llms-full.txt

> ui-layouts is a collection of beautifully-designed, accessible components and a code distribution platform. It is built with TypeScript, Tailwind CSS, and modern React patterns. It supports multiple frameworks including Next.js, Vite, Remix, Astro, and more. Open Source. Open Code. AI-Ready. It also comes with a command-line tool to install and manage components and a registry system to publish and distribute code.

## Overview

- [Introduction](https://www.ui-layouts.com/docs): Core principles—Open Code, Composition, Distribution, Beautiful Defaults, and AI-Ready design.
- [CLI](https://www.ui-layouts.com/docs/cli): Command-line tool for installing and managing components.
- [components.json](https://www.ui-layouts.com/docs/components-json): Configuration file for customizing CLI and component installation.
- [Theming](https://www.ui-layouts.com/docs/theming): Guide to customizing colors, typography, and design tokens.
- [Changelog](https://www.ui-layouts.com/docs/changelog): Release notes and version history.
- [About](https://www.ui-layouts.com/docs/about): Credits and project information.

## Installation

- [Next.js](https://www.ui-layouts.com/docs/installation/next): Install ui-layouts in a Next.js project.
- [Vite](https://www.ui-layouts.com/docs/installation/vite): Install ui-layouts in a Vite project.
- [Remix](https://www.ui-layouts.com/docs/installation/remix): Install ui-layouts in a Remix project.
- [Astro](https://www.ui-layouts.com/docs/installation/astro): Install ui-layouts in an Astro project.
- [Laravel](https://www.ui-layouts.com/docs/installation/laravel): Install ui-layouts in a Laravel project.
- [Gatsby](https://www.ui-layouts.com/docs/installation/gatsby): Install ui-layouts in a Gatsby project.
- [React Router](https://www.ui-layouts.com/docs/installation/react-router): Install ui-layouts in a React Router project.
- [TanStack Router](https://www.ui-layouts.com/docs/installation/tanstack-router): Install ui-layouts in a TanStack Router project.
- [Manual Installation](https://www.ui-layouts.com/docs/installation/manual): Manually install ui-layouts without CLI.

## Components

### Forms & Input

- [Buttons](https://www.ui-layouts.com/components/buttons): Button components with multiple variants and styles.
- [Color Picker](https://www.ui-layouts.com/components/color-picker): Advanced color picker with multiple variants.
- [Password](https://www.ui-layouts.com/components/password): Password input with strength indicator and show/hide functionality.
- [Phone Input](https://www.ui-layouts.com/components/phone-input): Phone number input with country code support.
- [Datetime Picker](https://www.ui-layouts.com/components/datetime-picker): Date and time picker component with calendar integration.
- [Multi Selector](https://www.ui-layouts.com/components/multi-selector): Multi-select component with tag management.
- [File Upload](https://www.ui-layouts.com/components/file-upload): File upload with drag-and-drop and preview.
- [Range Slider](https://www.ui-layouts.com/components/range-slider): Range slider with multiple variants and configurations.
- [Tags Input](https://www.ui-layouts.com/components/tags-input): YouTube-style tags input component.

### Layout & Navigation

- [Tabs](https://www.ui-layouts.com/components/tabs): Tabbed interface component with multiple styles.
- [Image Tabs](https://www.ui-layouts.com/components/image-tabs): Image-based tab component with gallery functionality.
- [Magnified Doc](https://www.ui-layouts.com/components/magnified-doc): Document viewer with zoom and magnification.
- [Grid](https://www.ui-layouts.com/components/grid): Grid layout component with multiple configurations.
- [Masonary Grid](https://www.ui-layouts.com/components/masonary-grid): Masonry grid layout for responsive designs.
- [Responsive Header](https://www.ui-layouts.com/components/responsive-header): Responsive header with navigation and menu.
- [FAQs](https://www.ui-layouts.com/components/faqs): FAQ accordion component with expandable items.
- [Image Accordion](https://www.ui-layouts.com/components/image-accordions): Image-based accordion with hover effects.

### Overlays & Dialogs

- [Dialog](https://www.ui-layouts.com/components/dialog): Modal dialog component with multiple variants.
- [Media Modal](https://www.ui-layouts.com/components/media-modal): Media viewer modal with gallery support.
- [Linear Modal](https://www.ui-layouts.com/components/linear-modal): Linear-style modal with card layout.
- [Gallery Modal](https://www.ui-layouts.com/components/gallery-modal): Gallery modal with accordion and slider.
- [Responsive Modal](https://www.ui-layouts.com/components/responsive-modal): Responsive modal that adapts to screen sizes.
- [Directional Drawer](https://www.ui-layouts.com/components/directional-drawer): Multi-directional drawer with Vaul integration.
- [Motion Drawer](https://www.ui-layouts.com/components/motion-drawer): Animated drawer with smooth transitions.

### Animation & Motion

- [Swapy](https://www.ui-layouts.com/components/swapy): Drag and drop component with sortable items.
- [Timeline Animation](https://www.ui-layouts.com/components/timeline-animation): Timeline with scroll-triggered animations.
- [Scroll Animation](https://www.ui-layouts.com/components/scroll-animation): Scroll-triggered animation component.
- [Scroll Text](https://www.ui-layouts.com/components/scroll-text): Animated text that appears on scroll.
- [Text Marquee](https://www.ui-layouts.com/components/scroll-text-marquee): Marquee text animation component.
- [Randomized Text](https://www.ui-layouts.com/components/randomized-text-effect): Random text effect generator.
- [Image Mousetrail](https://www.ui-layouts.com/components/image-mousetrail): Mouse trail effect for images.
- [Sparkles](https://www.ui-layouts.com/components/sparkles): Animated sparkles particle effect.
- [Sparkles Title](https://www.ui-layouts.com/components/sparkles-title): Mouse-following sparkles on titles.
- [Smooth Scroll](https://www.ui-layouts.com/components/smooth-scroll): Smooth scrolling with Lenis.
- [Sticky Scroll](https://www.ui-layouts.com/components/sticky-scroll): Sticky scroll sections with reveal effects.
- [Horizontal Scroll](https://www.ui-layouts.com/components/horizontal-scroll): Horizontal scroll with 3D globe.
- [Stacking Card](https://www.ui-layouts.com/components/stacking-card): CSS stacking card with interactive effects.

### Visual Effects

- [Liquid Glass](https://www.ui-layouts.com/components/liquid-glass): Liquid glass effect components with multiple variants.
- [Noise](https://www.ui-layouts.com/components/noise): Visual noise and distortion effects.
- [Blur Vignette](https://www.ui-layouts.com/components/blur-vignette): Blur and vignette overlay effects.
- [Spotlight Cards](https://www.ui-layouts.com/components/spotlight-cards): Spotlight effect on cards with animations.
- [Image Reveal](https://www.ui-layouts.com/components/image-reveal): Image reveal with scroll and parallax effects.
- [Animated Beam](https://www.ui-layouts.com/components/animated-beam): Animated beam effect with multiple inputs.
- [Blocks](https://www.ui-layouts.com/components/blocks): Background blocks with various effects.

### 3D & Visual

- [Globe](https://www.ui-layouts.com/components/globe): Interactive 3D globe with Three.js.
- [Image Ripple Effect](https://www.ui-layouts.com/components/image-ripple-effect): Ripple effect on images with Three.js.
- [R3F Blob](https://www.ui-layouts.com/components/r3f-blob): Animated 3D blob with React Three Fiber.
- [Mesh Gradients](https://www.ui-layouts.com/components/mesh-gradients): Animated mesh gradients with Three.js.

### Media & Galleries

- [Clip Path](https://www.ui-layouts.com/components/clip-path): Creative clip path masking effects.
- [Image Masking](https://www.ui-layouts.com/components/image-masking): Advanced image masking with multiple effects.
- [Video Masking](https://www.ui-layouts.com/components/video-masking): Video masking with creative overlays.
- [Hover Cards](https://www.ui-layouts.com/components/hover-cards): Interactive hover cards with stripe effects.
- [Product Cards](https://www.ui-layouts.com/components/product-cards): E-commerce product cards with animations.
- [Gradient Border](https://www.ui-layouts.com/components/gradient-border): Cards with animated gradient borders.
- [Carousel](https://www.ui-layouts.com/components/carousel): Image carousel with multiple variants.
- [Framer Carousel](https://www.ui-layouts.com/components/framer-carousel): Framer Motion powered carousel.
- [Progressive Carousel](https://www.ui-layouts.com/components/progressive-carousel): Horizontal scrolling carousel.
- [Marquee](https://www.ui-layouts.com/components/marquee): Vertical and horizontal marquee components.

### Data Display

- [Buy Me Coffee](https://www.ui-layouts.com/components/buy-me-coffee): Coffee support component with multiple styles.

## Blocks

- [Hero Section](https://www.ui-layouts.com/blocks/hero-section): Beautiful hero layouts for landing pages.
- [Feature Section](https://www.ui-layouts.com/blocks/feature-section): Feature showcase layouts.
- [About Section](https://www.ui-layouts.com/blocks/about-section): About page layouts.
- [Team Section](https://www.ui-layouts.com/blocks/team-section): Team member showcase layouts.
- [Stats Section](https://www.ui-layouts.com/blocks/stats-section): Statistics and metrics layouts.
- [Testimonial Section](https://www.ui-layouts.com/blocks/testimonial-section): Customer testimonial layouts.
- [Experience Section](https://www.ui-layouts.com/blocks/experience-section): Experience timeline layouts.
- [Pricing Section](https://www.ui-layouts.com/blocks/pricing-section): Pricing table layouts.
- [FAQ Section](https://www.ui-layouts.com/blocks/faq-section): FAQ and accordion layouts.
- [Footer Section](https://www.ui-layouts.com/blocks/footer-section): Footer layouts.

#Labs
 
 - [playground of components](https://www.ui-layouts.com/labs): you can visiualize the component with a wonderfull background and then record the components


## Registry Schemas

- [Registry Schema](https://www.ui-layouts.com/r/registry.json): JSON Schema for registry index files. Defines the structure for a collection of components, blocks, hooks, pages, etc. Requires name, homepage, and items array.