Panel
API reference for the Panel component
A bordered content container with an optional inline title.
Panel renders a rounded border with an optional title integrated into the top edge. Without a width, it fills available space using flexGrow. Pass a fixed number or a percentage string like "50%" via the width BoxProp to control sizing. Long titles are automatically truncated to fit. An optional footer is pinned to the bottom of the panel, useful for status text or counts.
import { Panel } from 'giggles/ui';
function FileList() {
return (
<Panel title="Files" footer={<Text dimColor>3 items</Text>}>
<Text>index.ts</Text>
<Text>utils.ts</Text>
<Text>types.ts</Text>
</Panel>
);
}API Reference
Panel
Prop
Type
Examples
Side-by-side panels
<Box gap={1}>
<Panel title="Source">
<Text>main.ts</Text>
</Panel>
<Panel title="Output">
<Text>main.js</Text>
</Panel>
</Box>Fixed width
<Panel title="Sidebar" width={30}>
<Text>Navigation content</Text>
</Panel>Percentage width
<Panel title="Main" width="100%">
<Text>Full-width content</Text>
</Panel>