Wovryn UI Kit

Accordion

Accordion uses Mantine's keyboard navigation, state management, and accessible compound component structure with Wovryn's Tailwind styles.

Import

import { Accordion } from "@wovryn/uikit";

Example

import { Accordion, theme, ThemeProvider } from "@wovryn/uikit";

export default function AccordionExample() {
  return (
    <ThemeProvider theme={theme}>
      <Accordion className="w-full max-w-xl">
        <Accordion.Item value="first">
          <Accordion.Control>What powers this component?</Accordion.Control>
          <Accordion.Panel>Mantine behavior with Wovryn styling.</Accordion.Panel>
        </Accordion.Item>
        <Accordion.Item value="second">
          <Accordion.Control>Can several panels stay open?</Accordion.Control>
          <Accordion.Panel>Yes. Add the multiple prop to Accordion.</Accordion.Panel>
        </Accordion.Item>
      </Accordion>
    </ThemeProvider>
  );
}

Use Accordion.Item, Accordion.Control, and Accordion.Panel exactly as you would with Mantine. The default, contained, filled, and separated variants are styled by the UI kit theme.