styple

Accordion

Vertically stacked headings that each reveal a section.

Example

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@styple/design-system";

<Accordion type="single">
  <AccordionItem value="accordion-one">
    <AccordionTrigger>Accordion one</AccordionTrigger>
    <AccordionContent>
      <Text css={{ p: "$sm" }}>A section of content one.</Text>
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="accordion-two">
    <AccordionTrigger>Accordion two</AccordionTrigger>
    <AccordionContent>
      <Text css={{ p: "$sm" }}>A section of content two.</Text>
    </AccordionContent>
  </AccordionItem>
</Accordion>

API Reference

See Radix-UI Accordion (v0.1.6) for details. This only covers styple abstractions.

Accordion

Acts as Accordion.Root. What differs is that collapsible is set to true when type = single and the css prop from Stitches is available as its a styled component.

AccordionItem

A styled component wrapper for Accordion.Item.

AccordionTrigger

A styled abstraction combining Accordion.Header and Accordion.Trigger. Provides custom props:

Prop	Type	Default	Explanation
`noSeparator?`	`boolean`	-	Should each heading/trigger have a `<hr />` separator.

AccordionContent

A styled component wrapper for Accordion.Content.

Releases

AlertDialog