Accordion component is a UI element that allows users to expand and collapse sections of content. It can be useful for organizing large amounts of information in a limited space. An accordion component typically consists of a header that displays a title or a summary of the content, and a body that contains the full content.
npm i @still-ui/accordion
import {
AccordionRoot,
AccordionItem,
AccordionTrigger,
AccordionContent,
} from "@still-ui/accordion";
const Accordion = () => {
return (
<AccordionRoot>
<AccordionItem>
<AccordionTrigger />
<AccordionContent></AccordionContent>
</AccordionItem>
</AccordionRoot>
);
};
import {
AccordionRoot,
AccordionItem,
AccordionTrigger,
AccordionContent,
} from "@still-ui/accordion";
const Accordion = () => {
return (
<AccordionRoot type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger
title={"Lorem ipsum dolor sit amet, consectetur adipiscing elit?"}
/>
<AccordionContent>
Nulla ornare, nulla at commodo condimentum, nibh elit cursus enim, a
imperdiet dolor urna ut felis.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger title={"Pellentesque vel sapien nisl?"} />
<AccordionContent>
Fusce finibus justo ut dui auctor fermentum. Nulla facilisi. Curabitur
quis enim vel felis accumsan faucibus.
</AccordionContent>
</AccordionItem>
</AccordionRoot>
);
};
export default Accordion;
By default, collapsible prop is set to false so when an item is opened, it cannot be close. To override this behavior, set the collapsible prop to true.
const Accordion = () => {
return (
<AccordionRoot type="single" collapsible>
{/*Contents*/}
</AccordionRoot>
);
};
export default Accordion;
It is possible to open multiple accordion item at the same time by modifying the type prop of the AccordionRoot.
const Accordion = () => {
return (
<AccordionRoot type="multiple" collapsible>
{/*Contents*/}
</AccordionRoot>
);
};
export default Accordion;
To seperate each item in the accordion, set the splitted prop to true.
const Accordion = () => {
return (
<AccordionRoot type="multiple" splitted collapsible>
{/*Contents*/}
</AccordionRoot>
);
};
export default Accordion;
To add border arround the accordion, set bordered prop to true.
const Accordion = () => {
return (
<AccordionRoot type="multiple" bordered collapsible>
{/*Contents*/}
</AccordionRoot>
);
};
export default Accordion;
There are three built-in UI design available for accordion: brutal, glassmorphic, and neumorphic. To use the built-in design, set the ui prop to "brutal", "glassmorphic", or "neumorphic".
const Accordion = () => {
return (
<AccordionRoot type="multiple" ui="brutal" collapsible>
{/*Contents*/}
</AccordionRoot>
);
};
export default Accordion;
Still-UI is built on top of TailwindCSS so anyone can freely modify the styles to match on your brand. This is done by using the className prop.
const Accordion = () => {
return (
<AccordionRoot type="multiple" ui="brutal" className="gap-4" collapsible>
{/*Contents*/}
</AccordionRoot>
);
};
export default Accordion;