Park UI

Usage

Content

import { Box } from 'styled-system/jsx'
import { Button } from '~/components/ui/button'
import * as Collapsible from '~/components/ui/collapsible'

export const Demo = (props: Collapsible.RootProps) => {
  return (
    <Collapsible.Root defaultOpen {...props}>
      <Collapsible.Trigger asChild>
        <Button variant="outline">Toggle</Button>
      </Collapsible.Trigger>
      <Collapsible.Content>
        <Box bg="accent.default" color="accent.fg" p="4" borderRadius="l3" mt="3">
          Content
        </Box>
      </Collapsible.Content>
    </Collapsible.Root>
  )
}

Installation

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

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

const styles = tv(
  {
    base: 'collapsible',
    slots: {
      root: 'collapsible__root',
      trigger: 'collapsible__trigger',
      content: 'collapsible__content',
    },
    variants: {},
  },
  { twMerge: false },
)
const { withProvider, withContext } = createStyleContext(styles)

export const Root = withProvider(Collapsible.Root, 'root')
export const Content = withContext(Collapsible.Content, 'content')
export const Trigger = withContext(Collapsible.Trigger, 'trigger')

export type RootProps = ComponentProps<typeof Root>
export interface ContentProps extends ComponentProps<typeof Content> {}
export interface TriggerProps extends ComponentProps<typeof Trigger> {}

import { Collapsible } 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: 'collapsible',
    slots: {
      root: 'collapsible__root',
      trigger: 'collapsible__trigger',
      content: 'collapsible__content',
    },
    variants: {},
  },
  { twMerge: false },
)
const { withProvider, withContext } = createStyleContext(styles)

export const Root = withProvider(Collapsible.Root, 'root')
export const Content = withContext(Collapsible.Content, 'content')
export const Trigger = withContext(Collapsible.Trigger, 'trigger')

export type RootProps = ComponentProps<typeof Root>
export interface ContentProps extends ComponentProps<typeof Content> {}
export interface TriggerProps extends ComponentProps<typeof Trigger> {}

Not yet available