Accordion

A collapsible section built on the native <details>/<summary> elements. Content placed in the default slot is shown when open.

Playground

Controls

Label

Icon Start

Appearance

Open

Disabled

Uppercase

Theme

HTMLReact

ShareCopy

Usage

<lt-accordion label="What is Latty?">
Latty is a framework-agnostic design system built on design tokens and Web Components.
</lt-accordion>

<lt-accordion label="Installation" icon-start="download" open>
Install with: pnpm add @latty-ds/tokens @latty-ds/web
</lt-accordion>

import { Accordion } from '@latty-ds/react';

<Accordion label="What is Latty?">
Latty is a framework-agnostic design system built on design tokens and Web Components.
</Accordion>

<Accordion label="Installation" iconStart="download" open>
Install with: pnpm add @latty-ds/tokens @latty-ds/web
</Accordion>

<template>
<lt-accordion label="What is Latty?">
  Latty is a framework-agnostic design system built on design tokens and Web Components.
</lt-accordion>

<lt-accordion label="Installation" icon-start="download" open>
  Install with: pnpm add @latty-ds/tokens @latty-ds/web
</lt-accordion>
</template>

API