# Settings

> An audio loop settings card with m:ss time fields for loop in and loop out, plus fade in and fade out fields in a collapsible section behind a show and hide toggle.

A shadcn/ui block from the [@01orbital](https://01orbital.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/01orbital/settings).

- Page, with a live preview: https://shadcn.exchange/r/01orbital/settings
- Screenshot: https://shadcn.exchange/shot/01orbital/settings/light.png
- Registry item: https://01orbital.dev/r/settings.json
- Categories: app
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/01orbital/settings.json
```

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

## Dependencies

- Registry items: `@01orbital/loop-settings-form`

## Files

### `blocks/app/settings/index.tsx`

```tsx
import { LoopSettingsForm } from "@/components/forms/loop-settings-form"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Loop points",
  body: "Where the bed repeats, and how it fades.",
} as const

const LABELS = {
  length: "loop",
  loopIn: "Loop in",
  loopOut: "Loop out",
  fades: "Fades",
  fadeIn: "Fade in",
  fadeOut: "Fade out",
  showFades: "Show fades",
  hideFades: "Hide fades",
} as const

const TIMES = {
  loopIn: "0:00",
  loopOut: "1:24",
  fadeIn: "0:02",
  fadeOut: "0:04",
}

export default function Settings() {
  return (
    <LoopSettingsForm
      title={COPY.title}
      description={COPY.body}
      defaultValue={TIMES}
      labels={LABELS}
      className="mx-auto w-full max-w-sm"
    />
  )
}
```