Accordion

import { Accordion } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  const items = [
    {
      "value": "item-1",
      "title": "Getting Started",
      "content": "Install the component and import it into your project. The accordion supports both single and multiple expand modes."
    },
    {
      "value": "item-2",
      "title": "Styling",
      "content": "The component integrates with the shape system for rounded, pill or sharp border-radius variants. All animations use spring physics."
    },
    {
      "value": "item-3",
      "title": "Accessibility",
      "content": "Built with Remix UI primitives, accessible roles, keyboard navigation, and focus management."
    },
    {
      "value": "item-4",
      "title": "Animation",
      "content": "Smooth height transitions and spring-animated chevron rotation. The fluid hover background tracks your cursor."
    }
  ]

  return () => (
    <>
      <Accordion defaultValue="item-1" items={items} />
    </>
  )
}

import { Accordion } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  return () => (
    <>
      <Accordion defaultValue="item-1" items={[
        {
          "value": "item-1",
          "title": "What is this component?",
          "content": "A collapsible accordion with animated expand/collapse and spring-animated chevron."
        }
      ]} />
    </>
  )
}

import { Accordion } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  return () => (
    <>
      <Accordion defaultValue="item-1" items={[
        {
          "value": "item-1",
          "title": "Getting Started",
          "content": "Install the component and import it into your project. The accordion supports both single and multiple expand modes."
        },
        {
          "value": "item-2",
          "title": "Styling",
          "content": "The component integrates with the shape system for rounded, pill or sharp border-radius variants. All animations use spring physics."
        },
        {
          "value": "item-3",
          "title": "Accessibility",
          "content": "Built with Remix UI primitives, accessible roles, keyboard navigation, and focus management."
        },
        {
          "value": "item-4",
          "title": "Animation",
          "content": "Smooth height transitions and spring-animated chevron rotation. The fluid hover background tracks your cursor."
        }
      ]} />
    </>
  )
}

import { Accordion } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  return () => (
    <>
      <Accordion type="multiple" defaultValue={['item-1', 'item-3']} items={[
        {
          "value": "item-1",
          "title": "First Section",
          "content": "Multiple items can be expanded at the same time."
        },
        {
          "value": "item-2",
          "title": "Second Section",
          "content": "Click any trigger to expand or collapse independently."
        },
        {
          "value": "item-3",
          "title": "Third Section",
          "content": "Each item operates independently in multiple mode."
        }
      ]} />
    </>
  )
}

import { Accordion } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  const sections = [{ label: 'Workspace', items: [
    { label: 'Inbox', href: '#inbox', badge: '3' },
    { label: 'Projects', href: '#projects' },
  ] }]

  return () => (
    <>
      <Accordion defaultValue="item-1" highlight="trigger" items={[
        {
          "value": "item-1",
          "title": "Expanded, but not tinted",
          "content": "The panel reads as part of the page rather than a filled block."
        },
        {
          "value": "item-2",
          "title": "Hover any row",
          "content": "The fill follows your cursor instead of marking a state."
        },
        {
          "value": "item-3",
          "title": "Compare with the sections above",
          "content": "Those hold a block across the row and its panel while open."
        }
      ]} />
    </>
  )
}