Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- CommandNew
- Dialog
- Empty
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Input Group
- Kbd
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
Resources
Frame
A framed container for grouping related information.
Section header
Brief description about the section
Section title
Section description
import {
Frame,
FrameDescription,
FrameFooter,
FrameHeader,
FramePanel,
FrameTitle,
} from "@/components/ui/frame";
export default function Particle() {
return (
<Frame className="w-full">
<FrameHeader>
<FrameTitle>Section header</FrameTitle>
<FrameDescription>Brief description about the section</FrameDescription>
</FrameHeader>
<FramePanel>
<h2 className="font-semibold text-sm">Section title</h2>
<p className="text-muted-foreground text-sm">Section description</p>
</FramePanel>
<FrameFooter>
<p className="text-muted-foreground text-sm">Footer</p>
</FrameFooter>
</Frame>
);
}
Installation
pnpm dlx shadcn@latest add @coss/frame
Usage
import {
Frame,
FrameDescription,
FrameFooter,
FrameHeader,
FramePanel,
FrameTitle,
} from "@/components/ui/frame"<Frame>
<FrameHeader>
<FrameTitle>Title</FrameTitle>
<FrameDescription>Description</FrameDescription>
</FrameHeader>
<FramePanel>Content</FramePanel>
<FrameFooter>Footer</FrameFooter>
</Frame>API Reference
Frame
The main container component for grouping related information.
| Prop | Type | Default |
|---|---|---|
className | string |
FramePanel
A panel container for frame content.
| Prop | Type | Default |
|---|---|---|
className | string |
<FramePanel>Content</FramePanel>FrameHeader
Header section for the frame.
| Prop | Type | Default |
|---|---|---|
className | string |
<FrameHeader>
<FrameTitle>Title</FrameTitle>
<FrameDescription>Description</FrameDescription>
</FrameHeader>FrameTitle
Title text for the frame header.
| Prop | Type | Default |
|---|---|---|
className | string |
<FrameTitle>Title</FrameTitle>FrameDescription
Description text for the frame header.
| Prop | Type | Default |
|---|---|---|
className | string |
<FrameDescription>Description</FrameDescription>FrameFooter
Footer section for the frame.
| Prop | Type | Default |
|---|---|---|
className | string |
<FrameFooter>Footer</FrameFooter>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
import {
Frame,
FrameDescription,
FrameHeader,
FramePanel,
FrameTitle,
} from "@/components/ui/frame";
export default function Particle() {
return (
<Frame className="w-full">
<FrameHeader>
<FrameTitle>Section header</FrameTitle>
<FrameDescription>Brief description about the section</FrameDescription>
</FrameHeader>
<FramePanel>
<h2 className="font-semibold text-sm">Separated panel</h2>
<p className="text-muted-foreground text-sm">Section description</p>
</FramePanel>
<FramePanel>
<h2 className="font-semibold text-sm">Separated panel</h2>
<p className="text-muted-foreground text-sm">Section description</p>
</FramePanel>
</Frame>
);
}