DetailRail

Slide-in contextual detail panel. Appears from the right on desktop; slides up as a bottom sheet on mobile (≤640px). Useful for showing detail alongside a list or table without navigating away.

import { DetailRail } from 'achery-ui'

<DetailRail
  open={!!selected}
  onClose={() => setSelected(null)}
  title="Transaction detail"
  eyebrow="Transaction"
  footer={<Button variant="primary" size="sm">Save</Button>}
>
  <Field label="Amount"><Input value={selected?.amount} /></Field>
</DetailRail>

Prop	Type	Default	Notes
open	boolean	—	required
onClose	() => void	—	required
title	string	—	required
eyebrow	string	—	Small label above title
children	ReactNode	—	Body content
footer	ReactNode	—	Sticky footer, typically action buttons
width	number	360	Desktop width in px
className	string	—