UI component
DetailsCard
DetailsCard organizes record-level content into a reusable detail surface with a strong header, tabbed sections, and action slots.
Installation
Install the package in your app.
pnpm add @rapidset/rapidkitUsage
Import components from the package entrypoint.
import { ButtonVariant, DetailsCard } from '@rapidset/rapidkit';Examples
Preview the component and copy the snippet.
User Details
Profile content
API Reference
Commonly used props at a glance.
| Prop | Description |
|---|---|
| title and icon | Sets the identity of the record or view at the top of the card. |
| isLoading | Shows a loading state while the backing record is still being fetched. |
| tabs | Breaks larger detail views into focused sections. |
| renderCustomContent | Lets you swap in a fully custom body when tabs are not the right fit. |
| onSave, onDelete, and onClose | Wires the common record-level actions in the card header. |
| customButtons | Adds extra actions without rebuilding the header layout. |
Accessibility
The tabbed layout follows expected tablist semantics, and loading content is announced in a polite live region.
Optional access rules
Header actions inherit the same optional access-aware behavior used elsewhere in the kit, so you can gate actions without custom wrappers.