Park UI

Usage

React

Pudding donut gummies chupa chups oat cake marzipan biscuit tart. Dessert macaroon ice cream bonbon jelly. Jelly topping tiramisu halvah lollipop.

Solid

Svelte

Vue

import { ChevronDownIcon } from 'lucide-react'
import * as Accordion from '~/components/ui/accordion'

export const Demo = (props: Accordion.RootProps) => {
  const items = ['React', 'Solid', 'Svelte', 'Vue']
  return (
    <Accordion.Root defaultValue={['React']} multiple {...props}>
      {items.map((item, id) => (
        <Accordion.Item key={id} value={item} disabled={item === 'Svelte'}>
          <Accordion.ItemTrigger>
            {item}
            <Accordion.ItemIndicator>
              <ChevronDownIcon />
            </Accordion.ItemIndicator>
          </Accordion.ItemTrigger>
          <Accordion.ItemContent>
            Pudding donut gummies chupa chups oat cake marzipan biscuit tart. Dessert macaroon ice
            cream bonbon jelly. Jelly topping tiramisu halvah lollipop.
          </Accordion.ItemContent>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  )
}

Installation

Insert code snippet into your project. Update import paths as needed.

import { Accordion } from '@ark-ui/react/accordion'
import type { ComponentProps } from 'react'
import { tv } from 'tailwind-variants'
import { createStyleContext } from '~/lib/create-style-context'

const styles = tv(
  {
    base: 'accordion',
    defaultVariants: { size: 'md' },
    slots: {
      root: 'accordion__root',
      item: 'accordion__item',
      itemTrigger: 'accordion__itemTrigger',
      itemContent: 'accordion__itemContent',
      itemIndicator: 'accordion__itemIndicator',
    },
    variants: {
      size: {
        md: {
          root: 'accordion__root--size_md',
          item: 'accordion__item--size_md',
          itemTrigger: 'accordion__itemTrigger--size_md',
          itemContent: 'accordion__itemContent--size_md',
          itemIndicator: 'accordion__itemIndicator--size_md',
        },
      },
    },
  },
  { twMerge: false },
)
const { withProvider, withContext } = createStyleContext(styles)

export const Root = withProvider(Accordion.Root, 'root')
export const Item = withContext(Accordion.Item, 'item')
export const ItemContent = withContext(Accordion.ItemContent, 'itemContent')
export const ItemIndicator = withContext(Accordion.ItemIndicator, 'itemIndicator')
export const ItemTrigger = withContext(Accordion.ItemTrigger, 'itemTrigger')

export type RootProps = ComponentProps<typeof Root>
export interface ItemProps extends ComponentProps<typeof Item> {}
export interface ItemContentProps extends ComponentProps<typeof ItemContent> {}
export interface ItemIndicatorProps extends ComponentProps<typeof ItemIndicator> {}
export interface ItemTriggerProps extends ComponentProps<typeof ItemTrigger> {}

import { Accordion } from '@ark-ui/solid'
import type { ComponentProps } from 'solid-js'
import { tv } from 'tailwind-variants'
import { createStyleContext } from '~/lib/create-style-context'

const styles = tv(
  {
    base: 'accordion',
    defaultVariants: { size: 'md' },
    slots: {
      root: 'accordion__root',
      item: 'accordion__item',
      itemTrigger: 'accordion__itemTrigger',
      itemContent: 'accordion__itemContent',
      itemIndicator: 'accordion__itemIndicator',
    },
    variants: {
      size: {
        md: {
          root: 'accordion__root--size_md',
          item: 'accordion__item--size_md',
          itemTrigger: 'accordion__itemTrigger--size_md',
          itemContent: 'accordion__itemContent--size_md',
          itemIndicator: 'accordion__itemIndicator--size_md',
        },
      },
    },
  },
  { twMerge: false },
)
const { withProvider, withContext } = createStyleContext(styles)

export const Root = withProvider(Accordion.Root, 'root')
export const Item = withContext(Accordion.Item, 'item')
export const ItemContent = withContext(Accordion.ItemContent, 'itemContent')
export const ItemIndicator = withContext(Accordion.ItemIndicator, 'itemIndicator')
export const ItemTrigger = withContext(Accordion.ItemTrigger, 'itemTrigger')

export type RootProps = ComponentProps<typeof Root>
export interface ItemProps extends ComponentProps<typeof Item> {}
export interface ItemContentProps extends ComponentProps<typeof ItemContent> {}
export interface ItemIndicatorProps extends ComponentProps<typeof ItemIndicator> {}
export interface ItemTriggerProps extends ComponentProps<typeof ItemTrigger> {}

Not yet available