Skip to main content

Our Features Showcase

This page showcases all the components and features available in the theme.

Avatar Component​

<Avatar
  src="https://github.com/ajay-dhangar.png"
  alt="User Name"
  size="large"
/>
http://localhost:3000
User Name
<Breadcrumb
  items={[
    { label: "Home", href: "/" },
    { label: "Category", href: "#" },
    { label: "Product" },
  ]}
/>
http://localhost:3000

Button Component​

<Button
  label="Primary Button"
  onClick={() => alert("Primary clicked")}
  variant="primary"
  size="medium"
/>
http://localhost:3000

Card Component​

<Card
  title="Advanced Card Title"
  content="This is an example of dynamic card content. It will expand when the button is clicked to show more details, offering a modern UI/UX experience."
  footer="Footer content can go here."
  expandable
/>
http://localhost:3000

Advanced Card Title

This is an example of dynamic card content. It will expand when the button is clicked to show more details, offering a modern UI/UX experience.
Footer content can go here.

Chart Component​

<Chart
  data={{
    labels: ["January", "February", "March", "April", "May", "June"],
    datasets: [
      {
        label: "Sales",
        data: [30, 45, 60, 40, 80, 70],
        backgroundColor: "rgba(54, 162, 235, 0.6)",
        borderColor: "rgba(54, 162, 235, 1)",
      },
    ],
  }}
/>
http://localhost:3000

Separator Component​

<Separator />
http://localhost:3000

Sheet Component​

<MySheet
  title="Pick a Topic"
  description="Select a topic from the list below to learn more about it."
  list={[
    { label: "Introduction to JavaScript", link: "#" },
    { label: "All About Variables", link: "#" },
    { label: "Data Types", link: "#" },
    { label: "Type Casting", link: "#" },
    { label: "Equality Comparisons", link: "#" },
    { label: "Loops and Iterations", link: "#" },
    { label: "Control Flow", link: "#" },
    { label: "Expressions and Operators", link: "#" },
    { label: "Functions", link: "#" },
    { label: "DOM APIs", link: "#" },
    { label: "Strict Mode", link: "#" },
    { label: "This Keyword", link: "#" },
    { label: "Asynchronous JavaScript", link: "#" },
    { label: "Working with APIs", link: "#" },
    { label: "Classes", link: "#" },
    { label: "Javascript Iterators and Generators", link: "#" },
    { label: "Modules in Javascript", link: "#" },
    { label: "Memory Management", link: "#" },
    { label: "JavaScript Chrome Dev Tools", link: "#" },
    { label: "FrontEnd", link: "#" },
    { label: "React", link: "#" },
    { label: "TypeScript", link: "#" },
    { label: "Node.js", link: "#" },
  ]}
/>
http://localhost:3000

Pick a Topic

Select a topic from the list below to learn more about it.

Skeleton Loader​

<Skeleton width="w-64" height="h-6" />
http://localhost:3000