Table of Contents

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.

TestComponent


return <TestComponent/>;
The `TestComponent` is a simple component that uses `next-intl` for translations. It displays a localized message based on the provided translation key.
Preview
Salut !

Usage

return <TestComponent/>;

AlertDialog


return (
  <div className="p-4">
    {/* Trigger Button */}
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
          Open Alert Dialog
        </button>
      </AlertDialogTrigger>

      {/* Alert Dialog Content */}
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete your
            data.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Confirm</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  </div>
);
AlertDialog component is used to display a dialog box with a message and a title.
Preview

Usage

return (
  <div className="p-4">
    {/* Trigger Button */}
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
          Open Alert Dialog
        </button>
      </AlertDialogTrigger>

      {/* Alert Dialog Content */}
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete your
            data.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Confirm</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  </div>
);

Button


return (
  <div className="p-4 space-y-4">
    {/* Default Button */}
    <Button onClick={() => alert("Default Button Clicked!")}>
      Default Button
    </Button>

    {/* Destructive Button */}
    <Button variant="destructive" onClick={() => alert("Destructive Action!")}>
      Destructive Button
    </Button>

    {/* Icon-Only Button */}
    <Button onlyIcon size="icon" onClick={() => alert("Icon Button Clicked!")}>
      <span role="img" aria-label="icon">
        🔍
      </span>
    </Button>

    {/* Outline Button */}
    <Button variant="outline" onClick={() => alert("Outline Button Clicked!")}>
      Outline Button
    </Button>
  </div>
);
Button component is used to trigger actions or events, such as submitting a form or performing an action.
Preview

Usage

return (
  <div className="p-4 space-y-4">
    {/* Default Button */}
    <Button onClick={() => alert("Default Button Clicked!")}>
      Default Button
    </Button>

    {/* Destructive Button */}
    <Button variant="destructive" onClick={() => alert("Destructive Action!")}>
      Destructive Button
    </Button>

    {/* Icon-Only Button */}
    <Button onlyIcon size="icon" onClick={() => alert("Icon Button Clicked!")}>
      <span role="img" aria-label="icon">
        🔍
      </span>
    </Button>

    {/* Outline Button */}
    <Button variant="outline" onClick={() => alert("Outline Button Clicked!")}>
      Outline Button
    </Button>
  </div>
);

Card


return (
  <div className="p-4 space-y-4">
    {/* Card Example */}
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>
          This is a description of the card. It provides additional context.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <p>
          This is the main content of the card. You can place any information
          or components here.
        </p>
      </CardContent>
      <CardFooter>
        <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
          Action
        </button>
      </CardFooter>
    </Card>
  </div>
);
Card component is used to display content in a structured and visually appealing way.
Preview

Card Title

This is a description of the card. It provides additional context.

This is the main content of the card. You can place any information or components here.


Usage

return (
  <div className="p-4 space-y-4">
    {/* Card Example */}
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>
          This is a description of the card. It provides additional context.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <p>
          This is the main content of the card. You can place any information
          or components here.
        </p>
      </CardContent>
      <CardFooter>
        <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
          Action
        </button>
      </CardFooter>
    </Card>
  </div>
);

CardListing


const arrayNav = [
  {
    title: "Home",
    desc: "Go back to the homepage.",
    link: "/",
    icon: <span role="img" aria-label="home">🏠</span>,
    id: "home",
  },
  {
    title: "Products",
    desc: "Explore our product catalog.",
    link: "/products",
    icon: <span role="img" aria-label="products">🛍️</span>,
    id: "products",
  },
  {
    title: "Contact Us",
    desc: "Get in touch with us.",
    link: "/contact",
    icon: <span role="img" aria-label="contact">📞</span>,
    id: "contact",
  },
];

return <CardListing arrayNav={arrayNav} />;
The `CardListing` component renders a grid of cards with titles, descriptions, icons, and links. It supports dynamic layouts and handles both internal and external links based on the provided data.
Preview

Usage

const arrayNav = [
  {
    title: "Home",
    desc: "Go back to the homepage.",
    link: "/",
    icon: <span role="img" aria-label="home">🏠</span>,
    id: "home",
  },
  {
    title: "Products",
    desc: "Explore our product catalog.",
    link: "/products",
    icon: <span role="img" aria-label="products">🛍️</span>,
    id: "products",
  },
  {
    title: "Contact Us",
    desc: "Get in touch with us.",
    link: "/contact",
    icon: <span role="img" aria-label="contact">📞</span>,
    id: "contact",
  },
];

return <CardListing arrayNav={arrayNav} />;

Clock


return (
  <div className="flex justify-center items-center h-screen">
    <Clock />
  </div>
);
The `Clock` component displays the current time and date, with support for timezones and tooltips showing UTC and local time information.
Preview

01:31

2026-02-13


Usage

return (
  <div className="flex justify-center items-center h-screen">
    <Clock />
  </div>
);

Collapsible


return (
  <Collapsible>
    <CollapsibleTrigger className="px-4 py-2 bg-blue-500 text-white rounded">
      Toggle Content
    </CollapsibleTrigger>
    <CollapsibleContent className="p-4 border rounded mt-2">
      This is the collapsible content. It can contain any elements or text.
    </CollapsibleContent>
  </Collapsible>
);
The `Collapsible` component allows you to toggle the visibility of content with a trigger button. It is useful for creating expandable sections in your UI.
Preview

Usage

return (
  <Collapsible>
    <CollapsibleTrigger className="px-4 py-2 bg-blue-500 text-white rounded">
      Toggle Content
    </CollapsibleTrigger>
    <CollapsibleContent className="p-4 border rounded mt-2">
      This is the collapsible content. It can contain any elements or text.
    </CollapsibleContent>
  </Collapsible>
);

Dialog


const triggerButton = (
  <DialogTrigger className="px-4 py-2 bg-blue-500 text-white rounded">
    Open Dialog
  </DialogTrigger>
);

const footerButtons = (
  <DialogFooter>
    <button className="px-4 py-2 bg-gray-300 rounded">Cancel</button>
    <button className="px-4 py-2 bg-blue-500 text-white rounded">Confirm</button>
  </DialogFooter>
);

return (
  <Dialog>
    {triggerButton}
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Dialog Title</DialogTitle>
        <DialogDescription>
          This is a description of the dialog content.
        </DialogDescription>
      </DialogHeader>
      <div className="p-4">
        <p>This is the main content of the dialog.</p>
      </div>
      {footerButtons}
    </DialogContent>
  </Dialog>
);
The `Dialog` component is a modal dialog box that can display content, titles, descriptions, and actions. It supports accessibility and animations for opening and closing.
Preview

Usage

const triggerButton = (
  <DialogTrigger className="px-4 py-2 bg-blue-500 text-white rounded">
    Open Dialog
  </DialogTrigger>
);

const footerButtons = (
  <DialogFooter>
    <button className="px-4 py-2 bg-gray-300 rounded">Cancel</button>
    <button className="px-4 py-2 bg-blue-500 text-white rounded">Confirm</button>
  </DialogFooter>
);

return (
  <Dialog>
    {triggerButton}
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Dialog Title</DialogTitle>
        <DialogDescription>
          This is a description of the dialog content.
        </DialogDescription>
      </DialogHeader>
      <div className="p-4">
        <p>This is the main content of the dialog.</p>
      </div>
      {footerButtons}
    </DialogContent>
  </Dialog>
);

ExpirationDelay


return (
  <div className={flex justify-center items-center h-screen}>
    <ExpirationDelay />
  </div>
);
The `ExpirationDelay` component displays a countdown timer indicating the remaining time until a session or token expires. It uses color-coded visual indicators and a tooltip to enhance user awareness.
Preview

00:09


Usage

return (
  <div className={flex justify-center items-center h-screen}>
    <ExpirationDelay />
  </div>
);

PageLoader


const loader = (
  <PageLoader color="text-blue-500" />
);

return loader;
The `PageLoader` component displays a loading animation with bouncing elements and a customizable text color. It is ideal for indicating loading states in full-page or section-level contexts.
Preview

Loading...


Usage

const loader = (
  <PageLoader color="text-blue-500" />
);

return loader;

Skeleton


const skeletonPlaceholders = (
  <div className="space-y-4">
    <Skeleton className="h-6 w-1/2" />
    <Skeleton className="h-6 w-3/4" />
    <Skeleton className="h-6 w-full" />
  </div>
);

return skeletonPlaceholders;
The `Skeleton` component is a placeholder used to indicate loading states. It provides a pulsing animation and can be styled dynamically using the `className` prop.
Preview

Usage

const skeletonPlaceholders = (
  <div className="space-y-4">
    <Skeleton className="h-6 w-1/2" />
    <Skeleton className="h-6 w-3/4" />
    <Skeleton className="h-6 w-full" />
  </div>
);

return skeletonPlaceholders;