Component Demo
Vertical Layout Example
This is a basic vertical layout. Content stacks in a single column.
PageSection & Feature Components
Layout components for building feature sections, CTAs, and content blocks.
PageSection
Two-column layout with slots for content and visuals. Inspired by Nuxt UI PageHero/PageCTA.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
as | string | 'section' | HTML element to render |
headline | string | - | Small text above title |
title | string | - | Main section title |
description | string | - | Section description text |
orientation | 'vertical' | 'horizontal' | 'vertical' | Layout direction |
reverse | boolean | false | Swap content/visual order |
variant | 'default' | 'muted' | 'dark' | 'default' | Background style |
links | PageSectionLink[] | - | CTA buttons |
align | 'start' | 'center' | 'end' | 'center' | Vertical alignment |
contained | boolean | true | Constrain max-width |
Slots
| Slot | Description |
|---|---|
top | Content above the main container |
header | Override headline + title + description |
headline | Custom headline content |
title | Custom title content |
description | Custom description content |
body | Content between description and footer |
footer | Override links area |
links | Custom link buttons |
default | Visual side content (images, marquees, etc.) |
bottom | Content below the main container |
Basic Vertical Layout
Horizontal Layout with Visual
Horizontal
Two-Column Layout
On desktop, content appears side-by-side. On mobile, it stacks vertically.
Horizontal Reversed with Feature List
Reversed Layout Example
The reverse prop swaps the order of content and visual columns.
Feature One
Description of the first feature goes here
Feature Two
Description of the second feature goes here
Feature Three
Description of the third feature goes here
Image or Video
Muted Background Variant
FeatureItem
Individual feature block with icon, title, and description.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
icon | Component | - | Lucide icon component |
title | string | required | Feature title |
description | string | - | Feature description |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Layout direction |
href | string | - | Link destination |
target | string | - | Link target |
Slots
| Slot | Description |
|---|---|
icon | Custom icon content |
title | Custom title content |
description | Custom description content |
Horizontal (Default)
First Feature
Description text for the first feature item
Second Feature
Description text for the second feature item
Third Feature
Description text for the third feature item
Vertical Orientation
Fast
Parallel execution
Secure
Air-gapped support
Team Ready
Multi-user workflows
As Links
Internal Link Example
Feature items can link to internal pages
External Link Example
Or link to external URLs (opens in new tab)
FeatureList
Renders an array of FeatureItems with consistent spacing.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
items | FeatureItemData[] | - | Array of feature objects |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Item layout |
gap | 'sm' | 'md' | 'lg' | 'md' | Space between items |
direction | 'column' | 'row' | 'column' | List stack direction |
FeatureItemData
ts
interface FeatureItemData {
icon?: Component // Lucide icon
title: string // Required
description?: string
href?: string
}Column Layout (Default)
Feature One
Description of the first feature goes here
Feature Two
Description of the second feature goes here
Feature Three
Description of the third feature goes here
Small Gap
Feature One
Description of the first feature goes here
Feature Two
Description of the second feature goes here
Feature Three
Description of the third feature goes here
Skeleton
Animated loading placeholder for development and loading states.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
as | string | 'div' | HTML element to render |
width | string | - | CSS width value |
height | string | - | CSS height value |
rounded | 'none' | 'sm' | 'md' | 'lg' | 'full' | 'md' | Border radius |
static | boolean | false | Disable animation |
Basic Skeletons
Card Placeholder
Different Rounded Styles
Static (No Animation)
Placeholder
Visual placeholder with diagonal line pattern. Inspired by Nuxt UI. Use for layout mockups and where content will be added.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
width | string | - | CSS width value |
height | string | - | CSS height value |
aspectRatio | string | - | CSS aspect-ratio (e.g., '16/9') |
rounded | 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'lg' | Border radius |
label | string | - | Optional label text |
Basic Placeholders
Image
With Aspect Ratio
Square
4:3
16:9
Different Rounded Styles
In PageSection
Placeholder Example
The visual side uses a Placeholder component to show where content will go.
Video or Screenshot
Complete Example
A full-featured section combining multiple elements:
Example
Complete Section Layout
This example shows all the features: headline, title, description, feature list, custom link, and a visual element.
Body Slot
Content placed in the body slot
Custom Links
Using the links slot for custom buttons
Visual Side
LogoMarquee in the default slot