Artboard

Place UI inside of a device-sized frame.

💃

I can see me me showing off your UI.

phone-1 demo

💃

I can see me me showing off your UI.

phone-1 demo horizontal

Code Example

<Artboard demo phone-1>
  <span class="text-5xl">💃</span>
  <p>I can see me me showing off your UI.</p>
  <p class="text-sm">phone-1</p>
</Artboard>

Notice that the above example uses the demo prop, which centers the contents both horizontally and vertically.

Components

Artboard is a standalone component.

Artboard can be customized with the following props:

Prop	Type	Description
`demo`	boolean	Adds shadow and radius. Puts items in center
`horizontal`	boolean	sets orientation to horizontal
`size`	string	sets size to one of the below size props
`phone-1`	boolean	sets size to phone-1
`phone-2`	boolean	sets size to phone-2
`phone-3`	boolean	sets size to phone-3
`phone-4`	boolean	sets size to phone-4
`phone-5`	boolean	sets size to phone-5
`phone-6`	boolean	sets size to phone-6

Artboard comes with 6 phone-based sizes. There are two ways of specifying the Artboard size:

The phone-1, phone-2, phone-3, phone-4, phone-5, and phone-6 boolean props.
The size prop, which accepts a string with any of the above prop names.

phone-1 demo

phone-2 demo

phone-3 demo

phone-4 demo

phone-5 demo

phone-6 demo

Code Example

<Artboard demo phone-2>
  <span class="text-5xl">💃</span>
  <p>I can see me me showing off your UI.</p>
  <p class="text-sm">phone-1</p>
</Artboard>