Bento Grid component 1
pnpm dlx shadcn@latest add https://ui.hirayalab.co.in/r/bento-grid-1.json
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
Add To Cart
pnpm dlx shadcn@latest add https://ui.hirayalab.co.in/r/add-to-cart-card.json
Deep Blue Nights
Experience the serene beauty of deep blue nights with this stunning collection. Perfect for adding a touch of elegance to your space.
Card with Marquee 1
pnpm dlx shadcn@latest add https://ui.hirayalab.co.in/r/card-with-marquee-1.json
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
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
Battery Saver
pnpm dlx shadcn@latest add https://ui.hirayalab.co.in/r/battery-saver.json
Less than 10% of battery remaining
Enable battery saver mode to extend your device's battery life.
Battery Saver Active
Battery saver mode is now enabled. Your device will optimize performance to extend battery life.