UI-LAYOUTs

The Gallery Modal provides several layout styles for interactive image viewing:

• Image Accordion: An accordion-style layout for images.
• Unsplash Style: A layout inspired by Unsplash for high-quality photo presentation.
• Gallery Tab: A tabbed or slider-based gallery interface.

The ui-layouts library provides a collection of creative button components designed with built-in styling, animations, and responsive layouts. These components support various hover effects, sizes, colors, and interactive states suitable for modern web applications.

Available button styles and effects include:

• Background Effects: button-background-shine, button-background-spotlight, and button-rotating-gradient.
• Hover Interactions: A wide range of hover styles from button-hover-active through button-hover-14.
• Custom Creative Designs: creative-button-1 and creative-button-2.

These components are built to be flexible for custom designs and responsive layouts using Tailwind CSS patterns.

The ui-layouts library provides several pre-built video masking patterns:

• Creative: General artistic masking.
• Splash Water: Organic, fluid-like masking effects.
• Text Overlay: Using text shapes to mask video content.
• Hexagon: Geometric masking using a hexagonal SVG shape.
• Hexagon Two: An alternative hexagonal masking variation.

The Image Reveal component provides an interactive effect where images appear and follow the user's cursor when hovering over a container element. It is designed for modern web experiences requiring smooth cursor tracking and dynamic image positioning.

There are two primary variations available:

1. Portfolio version: Optimized for portfolio-style layouts.
2. Basic version: A standard implementation of the reveal effect.

You can install the Animated Dialog component using the uilayouts CLI or by manually adding it via shadcn.

Using uilayouts CLI:

npx uilayouts@latest add dialog

Using shadcn CLI:

npx shadcn@latest add 'https://www.ui-layouts.com/r/dialog.json'

Manual Installation: If installing manually, ensure you have motion installed as a dependency:

npm install motion

You can install the Background Blocks component using either the uilayouts CLI or the shadcn CLI. For manual installation, ensure you have motion installed as a dependency.

Using uilayouts CLI

npx uilayouts@latest add blocks

Using shadcn CLI

npx shadcn@latest add 'https://www.ui-layouts.com/r/blocks.json'

Manual Installation

First, install the required animation dependency:

npm install motion

You can install the directional-drawer component using the uilayouts CLI or shadcn CLI, or by installing the dependency manually.

Using uilayouts CLI

npx uilayouts@latest add directional-drawer

Using shadcn CLI

npx shadcn@latest add 'https://www.ui-layouts.com/r/directional-drawer.json'

Manual Installation

If installing manually, ensure you install the vaul dependency:

npm install vaul

You can install the motion-drawer component using the uilayouts CLI or by adding it via shadcn. Alternatively, you can perform a manual installation if you prefer to manage files yourself.

Using uilayouts CLI:

npx uilayouts@latest add motion-drawer

Using shadcn:

npx shadcn@latest add 'https://www.ui-layouts.com/r/motion-drawer.json'

Manual Installation: Ensure you have motion installed as a dependency:

npm install motion

The Gallery Modal components (Image Accordion, Unsplash Style, and Gallery Tab) require motion (Framer Motion) to handle animations and interactive transitions. Install it using npm:

npm install motion

The directional-drawer is a responsive component that functions as a collapsible navigation drawer on mobile and a persistent sidebar on desktop. It supports three primary orientations:

• Left Sidebar: Slides in from the left.
• Top Sidebar: Slides in from the top.
• Bottom Sidebar: Slides in from the bottom.