DUPanel

Layout

Section panel with variants, tone accents, enter transitions, and optional collapse.

import { DUPanel } from 'deri-ui';

Live preview

Elevated

Soft enter

Fade-in panel with primary accent.

Soft

Slide up

Slide transition and success stripe.

Outline

Scale in

Outline chrome with scale motion.

Collapsible

Toggle body

Collapse this body with the header control.

typescript

<DUPanel title="Overview" variant="elevated" transition="fade" tone="primary" actions={<DUButton size="sm">Edit</DUButton>}>
  Body
</DUPanel>

Props

Prop	Type	Default	Description
variant	'default' \| 'soft' \| 'outline' \| 'elevated' \| 'ghost' \| 'flush'	'default'	Chrome
transition	'none' \| 'fade' \| 'slide' \| 'scale'	'none'	Enter animation
tone	'none' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'	'none'	Left accent
collapsible	boolean	false	Toggle body visibility
title / description / actions	mixed	—	Header slots
padded	boolean	true	Body padding
radius	DURadius	'md'	Corner radius

Usage

import { DUPanel } from 'deri-ui';

<DUPanel title="Overview" variant="elevated" transition="fade" tone="primary" actions={<DUButton size="sm">Edit</DUButton>}>
  Body
</DUPanel>

Customize with className, radius, and Tailwind utilities. Theme tokens come from deri-ui/tailwind.preset.

DUCard DUDrawer

← DUGrid DUBreadcrumbs →