UI Components / Blocks Live Preview

Get a clear idea of how your components look and feel by exploring them in our live playground.

Step 1

Browse and choose

Discover the perfect component for your use case in our live gallery. Interact with every block directly on the page and preview how it behaves across different breakpoints.

Step 2

Copy the code

Switch to the "Code" tab to see the code for a component and grab the part that you need, or click the clipboard button to quickly copy the entire snippet in one step.

Step 3

Make it yours

Every component is built with simple, composable utility classes, so customizing styles, content, and layout is straightforward. Tweak the design to match your brand and ship production-ready UI in minutes.

Bento Grid component 1

pnpm dlx shadcn@latest add https://ui.hirayalab.co.in/r/bento-grid-1.json

Open in

Powerful Responsive Grid System

Build layouts effortlessly with a flexible grid system. Adapt your content to any device and create visually balanced interfaces with ease.

  • 12-Column Layout: Supports complex and simple grid arrangements
  • Gap & Gutter Control: Easily adjust spacing between grid items
  • Responsive Breakpoints: Customizable for all screen sizes
  • Auto Placement: Let the grid auto-fit your content intelligently
device-mockup

Grid-Based Card Layouts

Organize content in visually appealing cards that snap perfectly into your grid. Achieve both structure and flexibility for any UI.

Grid-Based Card Layouts

Organize content in visually appealing cards that snap perfectly into your grid. Achieve both structure and flexibility for any UI.

Grid-Based Card Layouts

Organize content in visually appealing cards that snap perfectly into your grid. Achieve both structure and flexibility for any UI.

Grid-Based Card Layouts

Organize content in visually appealing cards that snap perfectly into your grid. Achieve both structure and flexibility for any UI.

Modular Grid Components for Next.js

Accelerate your workflow with modular, reusable grid components. Perfect for dashboards, galleries, and landing pages.

  • Production Ready: Used in real-world projects and trusted by teams
  • Performance Optimized: Minimal CSS and fast rendering for large grids
  • Accessible by Default: Semantic markup and keyboard navigation
  • Developer Friendly: Easy to extend and customize for any use case

Seamless Grid Integration & Deployment

Integrate your grid layouts with any framework and deploy instantly. Built for scalability and maintainability.

  • Zero Configuration: Plug-and-play grid setup
  • Framework Agnostic: Works with React, Next.js, Vite, and more
  • Tree Shakable: Import only the grid features you need
  • Instant Preview: See grid changes live as you build
feature/grid-layout
build/grid-deployment
production/grid-main

Add To Cart

pnpm dlx shadcn@latest add https://ui.hirayalab.co.in/r/add-to-cart-card.json

Open in
Deep Blue Nights - Image 1
Deep Blue Nights - Image 2
Deep Blue Nights - Image 3

Deep Blue Nights

2999

Experience the serene beauty of deep blue nights with this stunning collection. Perfect for adding a touch of elegance to your space.

Top Pick
Only 18 left

Card with Marquee 1

pnpm dlx shadcn@latest add https://ui.hirayalab.co.in/r/card-with-marquee-1.json

Open in

React Components

Modern UI components

TypeScript Ready

Type-safe development

Tailwind CSS

Utility-first styling

Dark Mode

Light & dark themes

Responsive Design

Mobile-first approach

Performance

Optimized for speed

Accessibility

WCAG compliant

Modern Stack

Next.js & React 18

React Components

Modern UI components

TypeScript Ready

Type-safe development

Tailwind CSS

Utility-first styling

Dark Mode

Light & dark themes

Responsive Design

Mobile-first approach

Performance

Optimized for speed

Accessibility

WCAG compliant

Modern Stack

Next.js & React 18

React Components

Modern UI components

TypeScript Ready

Type-safe development

Tailwind CSS

Utility-first styling

Dark Mode

Light & dark themes

Responsive Design

Mobile-first approach

Performance

Optimized for speed

Accessibility

WCAG compliant

Modern Stack

Next.js & React 18

React Components

Modern UI components

TypeScript Ready

Type-safe development

Tailwind CSS

Utility-first styling

Dark Mode

Light & dark themes

Responsive Design

Mobile-first approach

Performance

Optimized for speed

Accessibility

WCAG compliant

Modern Stack

Next.js & React 18

Get Early Access 1

pnpm dlx shadcn@latest add https://ui.hirayalab.co.in/r/get-early-access-1.json

Open in
Launching soon

Get Early Access of Hirayalab UI Components

Stay ahead of the curve by signing up for early access and be among the first to experience new features and updates.

300+ users can't be wrong

Profile Card

pnpm dlx shadcn@latest add https://ui.hirayalab.co.in/r/profile-card.json

Open in
Profile picture

Aniket Chauhan

Frontend Developer

Hey there, I'm Aniket Chauhan, a 20 y/o Electrical Engineering student at NIT Hamirpur with a passion for building interactive digital experiences.

Skills

Frontend
Backend
Fullstack
React
Angular
Vue.js
Node.js
Express
REST API

Experience

Hirayalab UI

Freelance Developer

May 2025 - Jul 2025