Guide
Components
Collapse

Collapse Component

ℹ️

The Collapse component is a React component designed to create collapsible sections with various customization options. It supports different variants such as toggle, checkbox, and focus, providing flexibility in its usage.

Example Preview

Collapse Component Preview

Usage

Import the Collapse component and use it in your React application:

import { Collapse } from "@/@core";
 
const MyComponent = () => {
  return (
    <Collapse
      title="Section Title"
      description="Section Description"
      icon="default"
      type="default"
      variant="focus"
    >
      {/* Your content goes here */}
    </Collapse>
  );
};
 
export default MyComponent;

Props

Prop NameTypeDefault ValueRequiredDescription
titlestring-YesThe title of the collapsible section.
descriptionstring, React.ReactNode-YesThe description or content of the collapsible section.
icon'default', 'plus', 'arrow''default'NoIcon variant for the collapsible section.
type'default', 'open', 'close''default'NoType variant for the collapsible section.
variant'toggle', 'checkbox', 'focus''toggle'NoThe type of the collapsible section.
childrenReact.ReactNode-NoAdditional content to be displayed inside the collapsible section.

Additional Props

Refer to the HTMLAttributes<HTMLDivElement> interface for standard HTML div element attributes. Additionally, the VariantProps<typeof CollapseVariants> interface is used to handle variant-specific props.

Examples

Check the provided MyComponent example for basic usage, and customize the component based on your specific needs.

ℹ️

Note: The Collapse component inspired by the DaisyUI (opens in a new tab) framework. Check it out for more awesome components. But our Collapse component is dynamic and easy to use. It is also fully customizable.

Code SnippetCountdown