Components
- Accordion
- Action Bar
- Alert Dialog
- Alert
- Announcement
- Aspect Ratio
- Autocomplete
- Avatar
- Badge
- Bottom Navigation
- Breadcrumb
- Button Group
- Button
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Circular Progress
- Circular Slider
- Clipboard
- Collapsible
- Color Picker
- Combobox
- Command
- Context Menu
- Data List
- Date Picker
- Dialog
- Drawer
- Editable
- Field
- File Upload
- Float
- Floating Panel
- Frame
- Hint
- Hover Card
- Image Cropper
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Link Overlay
- Listbox
- Marquee
- Menu
- Native Select
- Number Input
- Pagination
- Popover
- Progress
- Prose
- QR Code
- Radio Group
- Rating
- Resizable
- Scroll Area
- Segment Group
- Select
- Separator
- Sheet
- Sidebar
- Signature Pad
- Skeleton
- Skip Nav
- Slider
- Spinner
- Status
- Steps
- Switch
- Table
- Tabs
- Textarea
- Timer
- Toast
- Toggle Group
- Toggle Tooltip
- Toggle
- Tooltip
- Tour
- Tree View
Section header
Brief description about the section
Section title
Section description
Installation
pnpm dlx shadcn@latest add https://shark.vini.one/r/frame.json
Usage
import { Frame, FrameHeader, FrameTitle, FrameDescription, FramePanel, FrameFooter, } from "@/components/ui/frame";
<Frame> <FrameHeader> <FrameTitle>Title</FrameTitle> <FrameDescription>Description</FrameDescription> </FrameHeader> <FramePanel>Content</FramePanel> <FrameFooter>Footer</FrameFooter> </Frame>
Examples
Separated Panels
By default, multiple panels are separated with spacing between them.
Section header
Brief description about the section
Separated panel
Section description
Separated panel
Section description
API Reference
Frame
Main container for grouping related content into panels.
| Prop | Type | Default |
|---|---|---|
className | string | - |
asChild | boolean | false |
FramePanel
A single panel with optional header and footer.
| Prop | Type | Default |
|---|---|---|
className | string | - |
asChild | boolean | false |
FrameHeader
Header area for the panel. Often contains title and description.
| Prop | Type | Default |
|---|---|---|
className | string | - |
asChild | boolean | false |
FrameTitle
Panel title or heading.
| Prop | Type | Default |
|---|---|---|
className | string | - |
asChild | boolean | false |
FrameDescription
Panel description or subtitle.
| Prop | Type | Default |
|---|---|---|
className | string | - |
asChild | boolean | false |
FrameFooter
Footer area for the panel. Often contains actions.
| Prop | Type | Default |
|---|---|---|
className | string | - |
asChild | boolean | false |