Skip to main content

Elements Panel

The Elements panel is where you add things to your page. Click the + icon in the left sidebar to open it. It has three tabs: Elements, Layouts, and Components.

Elements​

The Elements tab has all the basic building blocks you can drag onto your canvas.

Elements Tab

They're grouped into categories:

Essentials - Button, Input, Heading, Paragraph, Container, Card

Layout & Navigation - Menu, Sidebar, Grid, Columns, Rows, Tabs, Breadcrumbs, Separator

Forms & Inputs - Form, Textarea, Select, Checkbox

Drag any element from the panel onto your canvas to add it to the page.

Layouts​

The Layouts tab has pre-built sections you can drop onto your page. Each one is a ready-made block with placeholder content that you can customize.

Layouts Tab

Layout categories include Hero, Centered, Split Layout, Simple, and more. Click one to add it to your page, then edit the text, images, and styles to make it yours.

Components​

Components are reusable elements you create yourself. When you build something you want to use again (a custom card, a nav bar, a footer), you can save it as a component.

Components Tab

Your saved components appear here. Drag one onto the canvas to use it. Each component shows its name and source file (e.g. Button.tsx).

Creating a Component​

Right-click any element on the canvas and select Convert to Component (⌘⇧K / ⌃⇧K).

Convert to Component

Give it a name and click Create.

Create Component Dialog

The element becomes a reusable component that appears in your Components tab.

Managing Components​

Right-click a component in the Components tab to Rename or Delete it.

Component Context Menu

Delete is disabled if the component is currently used on any page.