# Left chevron

> Rotating chevron placed before the label instead of after it.

A shadcn/ui block from the [@flx](https://ui.flexnative.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/flx/accordion-07).

- Page, with a live preview: https://shadcn.exchange/r/flx/accordion-07
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/flx/accordion-07-light-d6fa5f4d57c3819e.png
- Registry item: https://ui.flexnative.com/r/accordion-07.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.flexnative.com/r/accordion-07.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `@base-ui/react`

## Files

### `registry/patterns/accordion/accordion-07.tsx`

```tsx
import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion'
import { ChevronRightIcon } from 'lucide-react'

const items = [
  {
    value: 'getting-started',
    title: 'Getting started',
    body: 'Install the CLI, authenticate, and scaffold your first project in under a minute.',
  },
  {
    value: 'configuration',
    title: 'Configuration',
    body: 'Tune build targets, environment variables, and output paths from a single config file.',
  },
  {
    value: 'deployment',
    title: 'Deployment',
    body: 'Ship to preview and production with atomic, instantly reversible deploys.',
  },
]

export function Accordion07() {
  return (
    <AccordionPrimitive.Root
      defaultValue={['getting-started']}
      className="flex w-full max-w-md flex-col"
    >
      {items.map((item) => (
        <AccordionPrimitive.Item
          key={item.value}
          value={item.value}
          className="not-last:border-b"
        >
          <AccordionPrimitive.Header className="flex">
            <AccordionPrimitive.Trigger className="group/trigger flex flex-1 items-center gap-2 py-4 text-left text-sm font-medium outline-none focus-visible:underline">
              <ChevronRightIcon className="text-muted-foreground size-4 shrink-0 transition-transform group-aria-expanded/trigger:rotate-90" />
              {item.title}
            </AccordionPrimitive.Trigger>
          </AccordionPrimitive.Header>
          <AccordionPrimitive.Panel className="data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-sm">
            <p className="text-muted-foreground h-(--accordion-panel-height) pb-4 pl-6 data-ending-style:h-0 data-starting-style:h-0">
              {item.body}
            </p>
          </AccordionPrimitive.Panel>
        </AccordionPrimitive.Item>
      ))}
    </AccordionPrimitive.Root>
  )
}
```