Panel
$ npx shadcn@latest add https://lacodda.github.io/dowel/r/panel.jsonThree variants, for three distances from the page. raised sits on it,
floating has left it — a menu, a popover — and says so with a shadow, and
inset is for something inside another panel, where a second border would be
a box drawn in a box.
The corner is lg. The two products this came from disagreed about it —
16px in one, 12px in the other — for a component with the same name and the
same job in both.
SectionLabel is included because a panel almost always has one and every
product wrote its own. Its letter-spacing is the one they argued about: 0.08em
in six files and 0.09em in three, for the same visual element. It is a token
now, so the argument cannot recur.
Props
Read from the types in ui/panel.tsx, the file a product copies - so the description of each prop is also what an editor shows over it there.
Panel
| Prop | Type | Default | |
|---|---|---|---|
variant | raised | floating | inset | 'raised' |
And every prop of React's HTMLAttributes<HTMLDivElement>, passed on.
SectionLabel
The small uppercase caption above a block of content.
Every prop of React's HTMLAttributes<HTMLDivElement>, passed on.
Accessibility
The examples on the stand, through axe 4.14.0 in a browser, in both themes, against WCAG 2.2 A and AA and axe's best practices: 4 rules applied and passed, and none failed. The accessibility report has every item.
History
Each release that changed ui/panel.tsx - the file a product copies - newest first.