Next.js Components

import Alert from "../../components/ui/alert/Alert";
 
<Alert
  variant="success"
  title="Success Message"
  message="Be cautious when performing this action."
  showLink={true}
  linkHref="/"
  linkText="Learn more"
/>
<Alert
  variant="success"
  title="Success Message"
  message="Be cautious when performing this action."
  showLink={false}
/>

import Avatar from "../../components/ui/avatar/Avatar";
 
<Avatar src="/images/user/user-01.jpg" size="xsmall" />
<Avatar src="/images/user/user-01.jpg" size="small" />
<Avatar src="/images/user/user-01.jpg" size="medium" />
<Avatar src="/images/user/user-01.jpg" size="large" />
<Avatar src="/images/user/user-01.jpg" size="xlarge" />
<Avatar src="/images/user/user-01.jpg" size="xxlarge" />

import Badge from "../../components/ui/badge/Badge";
 
<Badge variant="light" color="primary">
  Primary
</Badge>
<Badge variant="light" color="success">
  Success
</Badge>
<Badge variant="light" color="error">
  Error
</Badge>
<Badge variant="light" color="warning">
  Warning
</Badge>
<Badge variant="light" color="info">
  Info
</Badge>
<Badge variant="light" color="light">
  Light
</Badge>
<Badge variant="light" color="dark">
  Dark
</Badge>

import Breadcrumb from "./Breadcrumb";
const twoLayerItems = [{ label: "Home", href: "/" }, { label: "UI Kits" }];
 
const threeLayerItems = [
  { label: "Home", href: "/" },
  { label: "UI Kits", href: "/ui-kits" },
  { label: "Avatar" },
];
<div>
  <Breadcrumb items={twoLayerItems} />
  <Breadcrumb items={threeLayerItems} />
</div>;
 
export default Breadcrumb;

<Button size="sm" variant="primary">
  Button Text
</Button>
<Button size="md" variant="primary">
  Button Text
</Button>

<div>
  <div className="shadow-theme-xs inline-flex items-center">
    <button
      type="button"
      className="bg-brand-500 ring-brand-500 hover:bg-brand-500 inline-flex items-center gap-2 px-4 py-3 text-sm font-medium text-white ring-1 ring-inset transition first:rounded-l-lg last:rounded-r-lg"
    >
      Button Text
    </button>
    <button
      type="button"
      className="text-brand-500 ring-brand-500 hover:bg-brand-500 -ml-px inline-flex items-center gap-2 bg-transparent px-4 py-3 text-sm font-medium ring-1 ring-inset first:rounded-l-lg last:rounded-r-lg hover:text-white"
    >
      Button Text
    </button>
    <button
      type="button"
      className="text-brand-500 ring-brand-500 hover:bg-brand-500 -ml-px inline-flex items-center gap-2 bg-transparent px-4 py-3 text-sm font-medium ring-1 ring-inset first:rounded-l-lg last:rounded-r-lg hover:text-white"
    >
      Button Text
    </button>
  </div>
</div>

<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-3">
  <CardWithImage />
  <CardWithImage />
  <CardWithImage />
</div>

"use client";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";
import Image from "next/image";
 
const carouselData = [
  {
    thumbnail: "/images/carousel/carousel-01.png",
  },
  rest of the object
];
 
export default function SlideOnly() {
  const swiperOptions = {
    modules: [Autoplay],
    autoplay: {
      delay: 5000,
      disableOnInteraction: false,
    },
  };
  return (
    <div className="carouselOne rounded-lg border border-gray-200 dark:border-gray-800">
      <Swiper {...swiperOptions}>
        {carouselData.map((item, i) => (
          <SwiperSlide key={i + 1}>
            <div className="overflow-hidden rounded-lg">
              <Image
                width={487}
                height={297}
                src={item.thumbnail}
                className="w-full rounded-lg"
                alt="carousel"
              />
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}

const [isOpen, setIsOpen] = useState(false);
 
function toggleDropdown() {
  setIsOpen(!isOpen);
}
 
function closeDropdown() {
  setIsOpen(false);
}
<div className="relative inline-block">
  <Button size="md" onClick={toggleDropdown}>
    Account Menu
    <ChevronDownIcon />
  </Button>
  <Dropdown isOpen={isOpen} onClose={closeDropdown} className="w-40 p-2">
    <DropdownItem
      onItemClick={closeDropdown}
      className="flex w-full rounded-lg text-left font-normal text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
    ></DropdownItem>
    <DropdownItem onItemClick={closeDropdown} className="hover:bg-blue-50">
      Edit Profile
    </DropdownItem>
  </Dropdown>
</div>;

  <ResponsiveImage />
  <TwoColumnImageGrid />
  <ThreeColumnImageGrid />

<div>
  <CustomLink href="/" variant="colored" color="primary">
    Primary link
  </CustomLink>
  <CustomLink href="/" variant="colored" color="secondary">
    Secondary link
  </CustomLink>
  <CustomLink href="/" variant="colored" color="success">
    Success link
  </CustomLink>
  <CustomLink href="/" variant="colored" color="danger">
    Danger link
  </CustomLink>
  <CustomLink href="/" variant="colored" color="warning">
    Warning link
  </CustomLink>
  <CustomLink href="/" variant="colored" color="info">
    Info link
  </CustomLink>
  <CustomLink href="/" variant="colored" color="light">
    Light link
  </CustomLink>
  <CustomLink href="/" variant="colored" color="dark">
    Dark link
  </CustomLink>
</div>

<div>
  <UnOrderedList />
  <OrderedList />
</div>

<div>
  <DefaultModal />
  <ModalBasedAlerts />
</div>

<div>
  <UpdateNotification
    title="New update! Available"
    message="Enjoy improved functionality and enhancements."
    onLaterClick={handleLater}
    onUpdateClick={handleUpdate}
  />
</div>

  <ProgressBar progress={55} />
  <ProgressBar progress={85} />
  <ProgressBar progress={35} />

<div>
  <PaginationWithText
    totalPages={10}
    initialPage={1}
    onPageChange={handlePageChange}
  />
</div>

<Popover position="top" trigger={<Button size="sm"> Popover on Top</Button>}>
  <div className="relative rounded-t-xl border-b border-gray-200 bg-gray-100 px-5 py-3 dark:border-white/[0.03] dark:bg-[#252D3A]">
    <h3 className="text-base font-semibold text-gray-800 dark:text-white/90">
      Top Popover
    </h3>
  </div>
  <div className="p-5">
    <p className="text-sm text-gray-500 dark:text-gray-400">
      Lorem ipsum dolor sit amet, consect adipiscing elit. Mauris facilisis
      congue exclamate justo nec facilisis.
    </p>
  </div>
</Popover>

<div>
  <RoundedRibbon />
</div>

<div>
  <SpinnerOne />
</div>

import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableCell,
} from "./TableComponents";
 
export default function TableExample() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableCell isHeader>Header 1</TableCell>
          <TableCell isHeader>Header 2</TableCell>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>Data 1</TableCell>
          <TableCell>Data 2</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Data 3</TableCell>
          <TableCell>Data 4</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

<div>
  <DefaultTab />
</div>

<div>
  <Tooltip content="This is a top tooltip" position="top">
    <Button size="sm">Tooltip Top</Button>
  </Tooltip>
 
  <Tooltip content="This is a right tooltip" position="right">
    <Button size="sm">Tooltip Right</Button>
  </Tooltip>
 
  <Tooltip content="This is a bottom tooltip" position="bottom">
    <Button size="sm">Tooltip Bottom</Button>
  </Tooltip>
 
  <Tooltip content="This is a left tooltip" position="left">
    <Button size="sm">Tooltip Left</Button>
  </Tooltip>
</div>

<div>
  <YouTubeEmbed videoId="dQw4w9WgXcQ" />
  <YouTubeEmbed videoId="dQw4w9WgXcQ" aspectRatio="4:3" />
</div>