Detail Sheet

Domain-neutral detail-sheet pattern for React applications built with COSS, Base UI, and Tailwind CSS.

The package provides a practical COSS Sheet wrapper for detail panels. Its visual structure is based on Lemind's RecordSheet: a fixed header, scrollable content area, and optional fixed footer. It includes:

• detail panel composition using the COSS Sheet built on Base UI Dialog
• title and description primitives
• optional header actions with support for multiple controls
• COSS SheetPanel scroll behavior with fixed header and footer
• reusable DetailGroup card composition for grouped content
• reusable DetailRow composition for label/value content
• optional close button
• right-side popup alignment

Requirements

• React 19
• Base UI 1.x
• Tailwind CSS 4

Installation

Install the published package with your package manager:

pnpm add @tc96/detail-sheet
# or: bun add @tc96/detail-sheet
# or: npm install @tc96/detail-sheet

Peer dependencies must be available in the consumer app:

pnpm add react react-dom @base-ui/react tailwindcss

Quick start

import { DetailSheet } from '@tc96/detail-sheet'
import { useState } from 'react'

export function ProductDetails() {
  const [open, setOpen] = useState(false)

  return (
    <DetailSheet
      open={open}
      onOpenChange={setOpen}
      title="Detalhes"
      description="Informações principais do item selecionado."
      footer={<button type="button">Salvar</button>}
    >
      <p>Coloque aqui o conteúdo do painel de detalhes.</p>
    </DetailSheet>
  )
}

To add the package from local registry:

bun add @tc96/detail-sheet
bunx shadcn@latest add ./node_modules/@tc96/detail-sheet/registry/detail-sheet.json

The registry route expects the consumer's COSS installation and resolves @coss/sheet, @coss/card, @coss/button, and @coss/tooltip into @/components/ui.

When installed through the registry, this package controls the suggested file destination through each registry file target. The current target installs the composition into @/components/detail-sheet; it no longer targets @/components/patterns/detail-sheet.

API

DetailSheet

| Prop | Type | Description | | --- | --- | --- | | open | boolean | Controlled open state (from Dialog.Root) | | onOpenChange | (open: boolean, details) => void | Callback when open state changes | | title | React.ReactNode | Optional title in the sheet header | | description | React.ReactNode | Optional description in the sheet header | | actions | React.ReactNode | Optional action controls rendered as a toolbar in the sheet header | | footer | React.ReactNode | Optional footer section | | showCloseButton | boolean | Show/hide the built-in close button (default true) |

DetailGroup

Composes future sheet content into a consistent card group. It accepts optional title, description, and action slots plus arbitrary children.

DetailRow

Composes a row inside a content group through leading, label, description, and value slots.

Use @tc96/detail-sheet/core when a non-visual layer only needs the public types.

Ownership boundary

| Package owns | Consumer owns | | --- | --- | | COSS Sheet composition and right-side contract | when to open/close and how to wire actions | | header, panel, footer, and close composition | content, titles, commands, and state persistence | | scroll behavior through COSS SheetPanel | content model and data-loading contract |

Development

Use Bun 1.3.14 and Node 24.18.0.