Installation
pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/frame.jsonUsage
<script lang="ts">
import * as Frame from "$lib/components/ui/frame/index.js";
</script>
<Frame.Root>
<Frame.Header>
<Frame.Title>Title</Frame.Title>
<Frame.Description>Description</Frame.Description>
</Frame.Header>
<Frame.Panel>Content</Frame.Panel>
<Frame.Footer>Footer</Frame.Footer>
</Frame.Root>API Reference
Frame.Root
The main container component for grouping related information.
| Prop | Type | Default |
|---|---|---|
class | string |
Frame.Panel
A panel container for frame content.
| Prop | Type | Default |
|---|---|---|
class | string |
<Frame.Panel>Content</Frame.Panel>Frame.Header
Header section for the frame.
| Prop | Type | Default |
|---|---|---|
class | string |
<Frame.Header>
<Frame.Title>Title</Frame.Title>
<Frame.Description>Description</Frame.Description>
</Frame.Header>Frame.Title
Title text for the frame header.
| Prop | Type | Default |
|---|---|---|
class | string |
<Frame.Title>Title</Frame.Title>Frame.Description
Description text for the frame header.
| Prop | Type | Default |
|---|---|---|
class | string |
<Frame.Description>Description</Frame.Description>Frame.Footer
Footer section for the frame.
| Prop | Type | Default |
|---|---|---|
class | string |
<Frame.Footer>Footer</Frame.Footer>Examples
Separated Panels
By default, multiple panels are separated with spacing between them.