- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Attachment
- Avatar
- Badge
- Breadcrumb
- Bubble
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Desktop Window
- Dialog
- Drawer
- Dropdown Menu
- Empty
- Field
- Frame
- Heading
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Live Waveform
- Marker
- Menubar
- Message
- Message Scroller
- Meter
- Meter Ring
- Native Select
- Navigation Menu
- NumberCount
- Pagination
- Popover
- Progress
- Progress Ring
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Timeline
- Toast
- Toggle
- Toggle Group
- Tooltip
Section title 2
Section description
import {
Frame,
FrameDescription,Installation#
bunx --bun shadcn@latest add @ondo-ui/frame
Usage#
import {
Frame,
FrameDescription,
FrameFooter,
FrameHeader,
FramePanel,
FrameTitle,
} from "@/components/ui/frame"<Frame>
<FramePanel>
<FrameHeader>
<FrameTitle>Frame Title</FrameTitle>
<FrameDescription>Frame Description</FrameDescription>
</FrameHeader>
<div className="p-5">Frame Content</div>
<FrameFooter>Frame Footer</FrameFooter>
</FramePanel>
</Frame>Customizing Radius#
You can customize the border radius of the frame and its panels using the
--frame-radius CSS variable.
<Frame className="[--frame-radius:var(--radius-lg)]">
<FramePanel>...</FramePanel>
</Frame>Examples#
With Separated Panels#
XS
Separated panel
Section description
Separated panel
Section description
SM
Separated panel
Section description
Separated panel
Section description
Default
Separated panel
Section description
Separated panel
Section description
LG
Separated panel
Section description
Separated panel
Section description
import {
Frame,
FrameDescription,With Stacked Panels#
Stacked panel
Section description
Stacked panel
Section description
import {
Frame,
FrameDescription,With Dense Panels#
Stacked panel
Section description
Stacked panel
Section description
import {
Frame,
FrameDescription,Without Outer Border#
The outer container of this frame has no border, only the background and panels are visible.
import {
Frame,
FrameDescription,Custom Spacing#
Warehouse A
Dense mode removes outer padding for a more compact appearance.
import {
Frame,
FrameDescription,Custom Radius#
Auth Service
Successfully logged in user: admin
Database
Query execution time: 12ms
Storage
Upload complete: image.png
import {
Frame,
FrameDescription,API Reference#
Frame#
The root container for one or more frame panels.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "inverse" | "ghost" | "default" | The visual style of the frame container. |
spacing | "xs" | "sm" | "default" | "lg" | "default" | The internal padding of the frame and margin between panels. |
stacked | boolean | false | If true, removes margins between panels and connects them vertically with shared borders. |
dense | boolean | false | If true, removes padding on the panel. |
className | string | - | Additional CSS classes for the container. |
CSS Variables#
| Variable | Default | Description |
|---|---|---|
--frame-radius | var(--radius-xl) | The outer border radius of the frame. Panels derive their radius from it, so this is the single knob to adjust. |
--frame-panel-radius | calc(var(--frame-radius) - var(--frame-px) - 1px) | The inner panel radius, reduced from --frame-radius so panel corners nest concentrically inside the frame. |
FramePanel#
A card-like container within the frame that holds header, content, and footer.
| Prop | Type | Default | Description |
|---|---|---|---|
fit | boolean | false | If true, sizes the panel to its content instead of growing. |
className | string | - | Additional CSS classes for the panel. |
FrameHeader#
A container for the title and description, with default padding.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the header. |
FrameTitle#
Heading for the frame panel.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the title. |
FrameDescription#
Supporting text for the frame panel.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the description. |
FrameFooter#
A container for actions or additional information at the bottom of the panel.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the footer. |