Layout Components

Layout components help you structure content beyond simple linear flow.

Columns

Create multi-column layouts for side-by-side content:

Left Column

This content appears on the left side.

Right Column

This content appears on the right side.

markdown

<Columns>
  <Column>
    **Left Column**

    This content appears on the left side.
  </Column>
  <Column>
    **Right Column**

    This content appears on the right side.
  </Column>
</Columns>

Three Columns

First

Column one content.

Second

Column two content.

Third

Column three content.

Custom Column Widths

Use the width attribute for custom proportions:

Sidebar

Narrower column.

Main Content

Wider column takes more space.

markdown

<Columns>
  <Column width="30%">
    **Sidebar**

    Narrower column.
  </Column>
  <Column width="70%">
    **Main Content**

    Wider column takes more space.
  </Column>
</Columns>

Custom Gap

Adjust spacing between columns:

Column A

Column B

markdown

<Columns gap="2rem">
  <Column>Column A</Column>
  <Column>Column B</Column>
</Columns>

Panel

Create bordered sections with optional titles:

Configuration

Configure your project by editing stardust.yaml in the project root.

markdown

<Panel title="Configuration" icon="settings">
  Configure your project by editing `stardust.yaml` in the project root.
</Panel>

Panel Without Title

A simple bordered panel without a header.

Panel with Code

Example Code

dart

void main() {
  print('Hello, Stardust!');
}

Frame

Display content in browser or device mockups:

Browser Frame

https://example.com

Your website preview appears here.

markdown

<Frame type="browser" url="https://example.com">
  Your website preview appears here.
</Frame>

Phone Frame

Mobile app preview

markdown

<Frame type="phone">
  Mobile app preview
</Frame>

Attributes Reference

Columns

Attribute	Type	Default	Description
`gap`	string	`"1rem"`	Space between columns

Column

Attribute	Type	Default	Description
`width`	string	auto	CSS width (e.g., `"50%"`, `"300px"`)

Panel

Attribute	Type	Default	Description
`title`	string	-	Optional panel title
`icon`	string	-	Emoji or icon name
`variant`	string	`"default"`	Visual style variant

Frame

Attribute	Type	Default	Description
`type`	string	`"browser"`	`"browser"` or `"phone"`/`"mobile"`
`url`	string	-	URL to display in browser address bar
`device`	string	`"iphone"`	Device type for phone frame

Use Cases

Component	Best For
Columns	Comparing options, showing before/after, sidebar layouts
Panel	Highlighting important sections, grouping related content
Frame	Showcasing websites, app screenshots, UI previews