The Studio

Open a variant#

The Studio shows the list on the left, the preview in the middle and props and code on the right. It holds 226 of the kit's 350 components with 1,162 variants, each one fully editable. The list grows with every release.

On every components page the button Open in Studio leads straight to the variant. The link carries it, and you can build it yourself. A variant that is not in the Studio yet opens on its components page instead.

/studio/?c=hero&v=split

Open hero split in the Studio

Edit props#

On the right every prop of the variant is a field. Change texts, numbers and switches directly, and add, remove and sort lists such as plans, questions or services. The preview follows with every key you press, without reloading.

A word between asterisks becomes the accent in many headlines, Websites that *sell*.

Preview#

• Three widths

  Phone 390, tablet 768 and desktop 1280 pixels, or drag the edge freely.

• Light and dark

  See every change in both modes before you copy the code.

• Accent and radius

  Every ready accent and every corner radius, live on your content.

Copy the code#

The Code tab shows the component with your values, ready to paste. Images, logos and other nodes stay as a marked spot, that is where your own element goes.

<Hero
  variant="split"
  title="Fresh bread, every morning"
  media={/* Image or screenshot */ null}
/>

Get the component itself with aiw add @ai-website/hero, see installation.

Share a link#

Edited props are kept in the link under p=. Whoever opens it sees your version, handy for reviews with your team or clients.

Shortcuts#

• Search the listCtrlK/⌘K
• Phone, 390 pixels1
• Tablet, 768 pixels2
• Desktop, 1280 pixels3
• Copy the codeC
• UndoCtrlZ/⌘Z
• RedoCtrlShiftZ/⌘ShiftZ
• Close a drawer or sheetEsc

On the edge of the preview the arrow keys change the width by 10 pixels, with Shift by 100.