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

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

₹ 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

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

X / Twitter

Instagram

300+ users can't be wrong

Profile Card

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

Open in

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