Joly UI is a free, open-source library of 50+ React components that extend shadcn/ui. Built with TypeScript, Tailwind CSS v4, and Radix UI primitives. Just copy, paste, and customize - no npm packages to install.

Is Joly UI free to use?

Yes, Joly UI is 100% free and MIT licensed. Use it in personal, commercial, and client projects without any cost or attribution requirements.

How do I install Joly UI components?

Run 'npx shadcn@latest add https://jolyui.dev/r/[component-name]' to add any component. It copies the code directly into your project - no external dependencies needed.

Does Joly UI work with Next.js?

Yes, Joly UI is fully compatible with Next.js 14+ including App Router, Server Components, and the latest React 19 features.

What's the difference between Joly UI and shadcn/ui?

Joly UI extends shadcn/ui with 50+ additional components not available in the original library. Same copy-paste workflow, same quality, more options including text animations, creative effects, and advanced inputs.

Is Joly UI accessible?

Yes, all Joly UI components are WCAG 2.1 AA compliant with proper ARIA attributes, keyboard navigation, and screen reader support built-in.

Bento Grid - Joly UI | React Components

AI Analytics Dashboard

A modern, data-driven dashboard layout showcasing AI metrics, system health, and real-time traffic.

Open in

AI Core v2.4Updated 2m ago

Neural Network
Intelligence Hub

Real-time processing of over 1.2M data points per second with predictive modeling and automated anomaly detection.

Accuracy

99.98%

Latency

14ms

Global Traffic

42.8k+12%

System Health

CPU Load24%

Memory4.2GB / 16GB

Active AI Agents

DataScout

Running

TrendBot

Idle

SecuritySentinel

Running

AI Insights

Anomaly Detected

Unusual traffic spike from Asia-Pacific region.

Optimization Tip

Reduce cache TTL for faster data propagation.

"use client";
 
import {
  ArrowUpRight,
  Brain,
  Cpu,
  Globe,
  Layers,
  Sparkles,
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { BentoGrid } from "@/components/ui/bento-grid";
 
export function BentoGridCustomDemo() {
  return (
    <BentoGrid className="mx-auto max-w-7xl gap-4 p-4">
      {/* Main AI Intelligence Card */}
      <Card className="relative overflow-hidden border-primary/20 bg-gradient-to-br from-indigo-500/10 via-purple-500/5 to-background md:col-span-2 lg:row-span-2">
        <div className="-right-20 -top-20 absolute h-64 w-64 rounded-full bg-primary/10 blur-3xl" />
        <CardHeader className="relative z-10 pb-2">
          <div className="flex items-center justify-between">
            <Badge
              variant="outline"
              className="border-primary/30 bg-primary/10 text-primary"
            >
              <Brain className="mr-1 h-3 w-3" />
              AI Core v2.4
            </Badge>
            <span className="text-muted-foreground text-xs">
              Updated 2m ago
            </span>
          </div>
          <CardTitle className="mt-4 font-bold text-3xl tracking-tight">
            Neural Network <br />
            <span className="text-primary">Intelligence Hub</span>
          </CardTitle>
        </CardHeader>
        <CardContent className="relative z-10 space-y-8">
          <p className="max-w-md text-muted-foreground">
            Real-time processing of over 1.2M data points per second with
            predictive modeling and automated anomaly detection.
          </p>
 
          <div className="grid grid-cols-2 gap-6">
            <div className="space-y-1">
              <p className="text-muted-foreground text-xs uppercase tracking-wider">
                Accuracy
              </p>
              <p className="font-bold font-mono text-2xl text-emerald-500">
                99.98%
              </p>
            </div>
            <div className="space-y-1">
              <p className="text-muted-foreground text-xs uppercase tracking-wider">
                Latency
              </p>
              <p className="font-bold font-mono text-2xl text-blue-500">14ms</p>
            </div>
          </div>
 
          <div className="flex flex-wrap gap-2">
            <Button size="sm" className="shadow-lg shadow-primary/20">
              Deploy Model
              <ArrowUpRight className="ml-2 h-4 w-4" />
            </Button>
            <Button size="sm" variant="outline">
              View Logs
            </Button>
          </div>
        </CardContent>
      </Card>
 
      {/* Real-time Traffic */}
      <Card className="border-border/50 bg-card/50 backdrop-blur-sm">
        <CardHeader className="pb-2">
          <CardTitle className="flex items-center gap-2 font-medium text-sm">
            <Globe className="h-4 w-4 text-blue-500" />
            Global Traffic
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex items-baseline gap-2">
            <span className="font-bold text-2xl">42.8k</span>
            <span className="font-medium text-emerald-500 text-xs">+12%</span>
          </div>
          <div className="mt-4 flex h-12 items-end gap-1">
            {[40, 70, 45, 90, 65, 80, 50, 95, 75, 60].map((h, i) => (
              <div
                key={i}
                className="flex-1 rounded-t-sm bg-blue-500/20 transition-all hover:bg-blue-500"
                style={{ height: `${h}%` }}
              />
            ))}
          </div>
        </CardContent>
      </Card>
 
      {/* System Health */}
      <Card className="border-border/50 bg-card/50 backdrop-blur-sm">
        <CardHeader className="pb-2">
          <CardTitle className="flex items-center gap-2 font-medium text-sm">
            <Cpu className="h-4 w-4 text-purple-500" />
            System Health
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between text-xs">
            <span className="text-muted-foreground">CPU Load</span>
            <span className="font-medium">24%</span>
          </div>
          <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
            <div
              className="h-full bg-purple-500 transition-all"
              style={{ width: "24%" }}
            />
          </div>
          <div className="flex items-center justify-between text-xs">
            <span className="text-muted-foreground">Memory</span>
            <span className="font-medium">4.2GB / 16GB</span>
          </div>
          <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
            <div
              className="h-full bg-blue-500 transition-all"
              style={{ width: "35%" }}
            />
          </div>
        </CardContent>
      </Card>
 
      {/* Active Agents */}
      <Card className="border-border/50 bg-card/50 backdrop-blur-sm md:col-span-2">
        <CardHeader className="pb-2">
          <div className="flex items-center justify-between">
            <CardTitle className="flex items-center gap-2 font-medium text-sm">
              <Layers className="h-4 w-4 text-amber-500" />
              Active AI Agents
            </CardTitle>
            <Button variant="ghost" size="sm" className="h-8 text-xs">
              Manage All
            </Button>
          </div>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
            {[
              { name: "DataScout", status: "Running", color: "bg-emerald-500" },
              { name: "TrendBot", status: "Idle", color: "bg-slate-400" },
              {
                name: "SecuritySentinel",
                status: "Running",
                color: "bg-emerald-500",
              },
            ].map((agent) => (
              <div
                key={agent.name}
                className="flex items-center gap-3 rounded-lg border bg-background/50 p-3"
              >
                <div className={`h-2 w-2 rounded-full ${agent.color}`} />
                <div className="flex-1 overflow-hidden">
                  <p className="truncate font-medium text-sm">{agent.name}</p>
                  <p className="text-[10px] text-muted-foreground uppercase">
                    {agent.status}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
 
      {/* Recent Insights */}
      <Card className="border-border/50 bg-card/50 backdrop-blur-sm">
        <CardHeader className="pb-2">
          <CardTitle className="flex items-center gap-2 font-medium text-sm">
            <Sparkles className="h-4 w-4 text-rose-500" />
            AI Insights
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="rounded-md border border-rose-500/10 bg-rose-500/5 p-2 text-[11px]">
            <p className="font-medium text-rose-600 dark:text-rose-400">
              Anomaly Detected
            </p>
            <p className="text-muted-foreground">
              Unusual traffic spike from Asia-Pacific region.
            </p>
          </div>
          <div className="rounded-md border border-emerald-500/10 bg-emerald-500/5 p-2 text-[11px]">
            <p className="font-medium text-emerald-600 dark:text-emerald-400">
              Optimization Tip
            </p>
            <p className="text-muted-foreground">
              Reduce cache TTL for faster data propagation.
            </p>
          </div>
        </CardContent>
      </Card>
    </BentoGrid>
  );
}

Feature Showcase

A premium "Bento Box" style feature grid perfect for SaaS landing pages and product showcases.

Open in

Enterprise-Grade
Security Infrastructure

Protect your data with military-grade encryption, multi-factor authentication, and real-time threat detection.

Trusted by 500+ enterprises

Lightning Fast

Experience sub-millisecond latency with our globally distributed edge network.

99.9% Uptime

Global Scale

Deploy your applications to over 200+ locations worldwide with a single click.

Edge Ready

Developer First

Comprehensive API documentation, SDKs for every language, and a powerful CLI to streamline your workflow.

$ npm install @jolyui/core

const client = new JolyClient();

Biometric Auth

Native support for FaceID, TouchID, and WebAuthn for seamless security.

"use client";
 
import { Code2, Fingerprint, Globe2, ShieldCheck, Zap } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import { BentoGrid } from "@/components/ui/bento-grid";
 
export function BentoGridPortfolioDemo() {
  return (
    <BentoGrid className="mx-auto max-w-7xl gap-4 p-4">
      {/* Hero Feature - Security */}
      <Card className="group relative overflow-hidden border-primary/20 bg-gradient-to-br from-primary/10 via-primary/5 to-background md:col-span-2 lg:row-span-2">
        <CardContent className="flex h-full flex-col justify-between p-8">
          <div className="relative z-10">
            <div className="mb-6 inline-flex rounded-2xl bg-primary/10 p-4 ring-1 ring-primary/20">
              <ShieldCheck className="h-10 w-10 text-primary" />
            </div>
            <h3 className="mb-4 font-bold text-3xl tracking-tight">
              Enterprise-Grade <br />
              <span className="text-primary">Security Infrastructure</span>
            </h3>
            <p className="max-w-md text-lg text-muted-foreground leading-relaxed">
              Protect your data with military-grade encryption, multi-factor
              authentication, and real-time threat detection.
            </p>
          </div>
 
          <div className="mt-8 flex items-center gap-6">
            <div className="-space-x-3 flex">
              {[1, 2, 3, 4].map((i) => (
                <div
                  key={i}
                  className="h-10 w-10 rounded-full border-2 border-background bg-muted ring-1 ring-primary/10"
                />
              ))}
            </div>
            <p className="font-medium text-muted-foreground text-sm">
              Trusted by <span className="text-foreground">500+</span>{" "}
              enterprises
            </p>
          </div>
        </CardContent>
        {/* Decorative background element */}
        <div className="-bottom-12 -right-12 absolute h-64 w-64 rounded-full bg-primary/5 blur-3xl transition-all group-hover:bg-primary/10" />
      </Card>
 
      {/* Lightning Fast */}
      <Card className="group border-border/50 bg-card/50 backdrop-blur-sm transition-all hover:border-amber-500/30">
        <CardContent className="p-6">
          <div className="mb-4 inline-flex rounded-xl bg-amber-500/10 p-3 ring-1 ring-amber-500/20">
            <Zap className="h-6 w-6 text-amber-500" />
          </div>
          <h4 className="mb-2 font-bold text-xl">Lightning Fast</h4>
          <p className="text-muted-foreground text-sm">
            Experience sub-millisecond latency with our globally distributed
            edge network.
          </p>
          <div className="mt-6 flex items-center gap-2">
            <Badge
              variant="secondary"
              className="bg-amber-500/10 text-amber-600 dark:text-amber-400"
            >
              99.9% Uptime
            </Badge>
          </div>
        </CardContent>
      </Card>
 
      {/* Global Scale */}
      <Card className="group border-border/50 bg-card/50 backdrop-blur-sm transition-all hover:border-blue-500/30">
        <CardContent className="p-6">
          <div className="mb-4 inline-flex rounded-xl bg-blue-500/10 p-3 ring-1 ring-blue-500/20">
            <Globe2 className="h-6 w-6 text-blue-500" />
          </div>
          <h4 className="mb-2 font-bold text-xl">Global Scale</h4>
          <p className="text-muted-foreground text-sm">
            Deploy your applications to over 200+ locations worldwide with a
            single click.
          </p>
          <div className="mt-6 flex items-center gap-2">
            <Badge
              variant="secondary"
              className="bg-blue-500/10 text-blue-600 dark:text-blue-400"
            >
              Edge Ready
            </Badge>
          </div>
        </CardContent>
      </Card>
 
      {/* Developer Experience */}
      <Card className="border-border/50 bg-card/50 backdrop-blur-sm transition-all hover:border-emerald-500/30 md:col-span-2">
        <CardContent className="p-8">
          <div className="flex flex-col justify-between gap-8 md:flex-row md:items-center">
            <div className="flex-1">
              <div className="mb-4 inline-flex rounded-xl bg-emerald-500/10 p-3 ring-1 ring-emerald-500/20">
                <Code2 className="h-6 w-6 text-emerald-500" />
              </div>
              <h4 className="mb-2 font-bold text-2xl">Developer First</h4>
              <p className="text-muted-foreground">
                Comprehensive API documentation, SDKs for every language, and a
                powerful CLI to streamline your workflow.
              </p>
            </div>
            <div className="flex-1 rounded-xl border bg-background/50 p-4 font-mono text-xs">
              <div className="mb-3 flex gap-1.5">
                <div className="h-2 w-2 rounded-full bg-rose-500/50" />
                <div className="h-2 w-2 rounded-full bg-amber-500/50" />
                <div className="h-2 w-2 rounded-full bg-emerald-500/50" />
              </div>
              <p className="text-emerald-500">$ npm install @jolyui/core</p>
              <p className="mt-1 text-muted-foreground">
                {/* Initialize the client */}
              </p>
              <p className="text-blue-500">
                const <span className="text-foreground">client</span> ={" "}
                <span className="text-purple-500">new</span>{" "}
                <span className="text-amber-500">JolyClient</span>();
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
 
      {/* Biometric Auth */}
      <Card className="group border-border/50 bg-card/50 backdrop-blur-sm transition-all hover:border-purple-500/30">
        <CardContent className="p-6">
          <div className="mb-4 inline-flex rounded-xl bg-purple-500/10 p-3 ring-1 ring-purple-500/20">
            <Fingerprint className="h-6 w-6 text-purple-500" />
          </div>
          <h4 className="mb-2 font-bold text-xl">Biometric Auth</h4>
          <p className="text-muted-foreground text-sm">
            Native support for FaceID, TouchID, and WebAuthn for seamless
            security.
          </p>
          <div className="mt-6">
            <div className="h-1 w-full rounded-full bg-muted">
              <div className="h-full w-3/4 rounded-full bg-purple-500" />
            </div>
          </div>
        </CardContent>
      </Card>
    </BentoGrid>
  );
}

Installation

CLI

npx shadcn@latest add "https://jolyui.dev/r/bento-grid"

Manual

Copy and paste the following code into your project. component/ui/bento-grid.tsx

import * as React from "react";
import { cn } from "@/lib/utils";
 
interface BentoGridProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
}
 
const BentoGrid = React.forwardRef<HTMLDivElement, BentoGridProps>(
  ({ className, children, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={cn(
          "grid auto-rows-[minmax(180px,1fr)] grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3",
          className,
        )}
        {...props}
      >
        {children}
      </div>
    );
  },
);
BentoGrid.displayName = "BentoGrid";
 
export { BentoGrid };

API Reference

Prop

Type

Notes

Responsive grid that adapts from 1 column on mobile to 3 columns on large screens
Uses CSS Grid with auto-rows for consistent item heights
Perfect for dashboard layouts, portfolio displays, and content grids
Items can span multiple columns and rows using standard CSS Grid classes
Supports all standard div props and custom className for styling

Bento Grid

AI Analytics Dashboard

Feature Showcase

Enterprise-Grade Security Infrastructure

Lightning Fast

Global Scale

Developer First

Biometric Auth

Installation

CLI

Manual

API Reference

Notes

On this page

Enterprise-Grade Security Infrastructure

Lightning Fast

Global Scale

Developer First

Biometric Auth

Enterprise-Grade
Security Infrastructure

Enterprise-Grade
Security Infrastructure