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.
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"
/>
)
}
pnpm dlx shadcn add @01orbital/settingsnpx shadcn add @01orbital/settingsyarn shadcn add @01orbital/settingsbunx --bun shadcn add @01orbital/settingsFree under the MIT license. Add the @01orbital registry to components.json once (install guide), then run the command.
It lands at components/blocks/app/settings/index.tsx, as source you own and edit.
import Settings from "@/components/blocks/app/settings"
export default function SettingsDemo() {
return (
<>
<Settings />
</>
)
}Registry pieces it installs with it:
loop-settings-formReport Issue
An issue report card form with Area and Severity selects, a one-line subject and a details textarea, preset to Billing and Serious, ending in a Send report button.
Share
A share card for a session link with a copy button and error fallback, and a people-with-access list where each person has an Orbital orb avatar and a permission select for edit or view.