Joly UI is a free, open-source collection of beautifully designed React components built on shadcn/ui and Radix UI. It provides accessible, customizable UI components for React and Next.js projects.

Is Joly UI free to use?

Yes, Joly UI is completely free and open source. You can use it in personal and commercial projects without any cost.

How do I install Joly UI components?

You can install Joly UI components using the CLI or by copying the component code directly into your project. Simply run the CLI command or copy-paste the component code from the documentation.

Does Joly UI work with Next.js?

Yes, Joly UI is fully compatible with Next.js, including the latest versions. All components are designed to work seamlessly with both React and Next.js applications.

Bento Grid

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