Overview

About

Getting Started

Layout

Box

Flex

Grid

Components

Accordion

Badge

Button

Checkbox

Panel

Portal

Progress Bar

Select

Skeleton

Separator

Switch

Theme

Tooltip

Properties

Color

Margin

Padding

Radius

Size

Spacing

Accordion Component

A versatile Accordion component, managing state, context, and styling.

Item 1

This is the content of Item 1.

Item 2

This is the content of Item 2.

Item 3

This is the content of Item 3.

import { Accordion, Text } from "@locus-ui/components";import styles from "./styles.css";
<Accordion.Root variant="muted">  <Accordion.Item value="item-1">    <Accordion.Header>      <Text>Item 1</Text>    </Accordion.Header>    <Accordion.Content>      <Text>This is the content of Item 1.</Text>    </Accordion.Content>  </Accordion.Item>

View Source

Anatomy

Import the component and its parts:

Anatomy

import { Accordion, Text } from "@locus-ui/components";
<Accordion.Root>  <Accordion.Item>    <Accordion.Header />    <Accordion.Content />  </Accordion.Item></Accordion.Root>

Examples

Variants

Accordion components come with three built in variants, solid, outlined, and muted.

Item 1

This is the content of Item 1.

Item 2

This is the content of Item 2.

Item 3

This is the content of Item 3.

Item 1

This is the content of Item 1.

Item 2

This is the content of Item 2.

Item 3

This is the content of Item 3.

Item 1

This is the content of Item 1.

Item 2

This is the content of Item 2.

Item 3

This is the content of Item 3.

variants.tsx

import { Accordion, Text } from "@locus-ui/components";
const variants = ["solid", "outlined", "muted"];
return variants.map((variant) => (  <Accordion.Root key={variant} variant={variant}>    <Accordion.Item value="item-1">      <Accordion.Header>        <Text>Item 1</Text>      </Accordion.Header>      <Accordion.Content>        <Text>This is the content of Item 1.</Text>

Multiple Open

The multiple prop allows multiple accordion items to be expanded simultaneously.

Item 1

This is the content of Item 1.

Item 2

This is the content of Item 2.

Item 3

This is the content of Item 3.

multiple.tsx

import { Accordion, Text } from "@locus-ui/components";
<Accordion.Root multiple variant="muted">  <Accordion.Item value="item-1">    <Accordion.Header>      <Text>Item 1</Text>    </Accordion.Header>    <Accordion.Content>      <Text>This is the content of Item 1.</Text>    </Accordion.Content>  </Accordion.Item>