Accordion

import { Accordion } from "~/components/ui/base/accordion";

<Accordion.Root>
  <Accordion.Trigger>Basic information</Accordion.Trigger>
  <Accordion.Content>
    A brief introduction to the topic and links to further resources.
  </Accordion.Content>
  <Accordion.Trigger>Advanced options</Accordion.Trigger>
  <Accordion.Content>
    Extended settings and tips for everyday use.
  </Accordion.Content>
</Accordion.Root>

import { AccordionList } from "~/components/ui/base/accordion";

const items = [
  {
    value: "basics",
    title: "What is Qwik?",
    content: "A framework focused on instant loading and minimal JavaScript on the client.",
  },
  {
    value: "resumability",
    title: "What is resumability?",
    content: "The server can resume the application state without a large hydration bundle.",
  },
  {
    value: "signals",
    title: "Reactivity",
    content: "Fine-grained signals for efficient UI updates.",
  },
];

<AccordionList items={items} />

import { AccordionList } from "~/components/ui/base/accordion";

const items = [
  {
    value: "basics",
    title: "What is Qwik?",
    content: "A framework focused on instant loading and minimal JavaScript on the client.",
  },
  {
    value: "resumability",
    title: "What is resumability?",
    content: "The server can resume the application state without a large hydration bundle.",
  },
  {
    value: "signals",
    title: "Reactivity",
    content: "Fine-grained signals for efficient UI updates.",
  },
];

<AccordionList items={items} multiple />