Layouts

Beta

Docs

Pricing

Open the app

Layouts

Beta

Docs

Pricing

Open the app

Layouts

Beta

Docs

Pricing

Open the app

Layouts

Beta

We hate devtools.

So we built one.

We hate devtools.

So we built one.

A notebook designed for building interfaces using TailwindCSS, fast.
Build, iterate and export well-engineered code in a single-click.

Layouts.dev blends visual design with code to help you build prototypes you can actually ship fast. Build-iterate-deploy faster than ever.

Start building today

Start building today

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15


16

17

// ////////////////////////

// Sample page

// ////////////////////////

/div flex flex-col p-11 gap-3 items-center

/h1 font-semibold Welcome to Layouts.dev! text- black text-center

/p text-gray-500 max-w-[400px] text-center We built this small editor to make your life simpler when developing interfaces with TailwindCSS.

/p Feel free to play around! text-end font-medium


/button %default bg-black mt-10
 @action=redirect(“/https://layouts.dev”)

/p Get started

S

Introducing

The fastest way to build
with Tailwind

The fastest way to build
with Tailwind

Why we built this

A letter from the team

A letter from the team

Hey there,

We built Layouts.dev because frankly, we were tired of the mess. As developers and designers, we've lived the frustration of clunky workflows and endless back-and-forths.
So we reimagined the whole thing.

One intuitive space where design and code play nice.

AI that assists but doesn't take over.

Prototypes you can actually ship.

Seamless integration into your existing projects

And the freedom to create without constraints.

We're not trying to just build another tool. We're aiming to change how interfaces are built.
Making it smoother, faster and dare we say…more fun?

Want to join us on this journey? We'd love to have you.

Cheers,

&

P.S. It's free to start. Give it a spin while we're in Beta and let us know what you think!

Straightforward process

From idea to code in less time

Layouts.dev simplifies UI development without boxing you in.

Design with simple code that feels like HTML

/div w-full items-center p-12 flex flex-col bg-[#F4F3F1]

/button %ghost py-1.5 px-3 h-min hover:bg-white text-[#5B5E66] delay-0 gap-2 items-center

/icon message-square-plus

/text Feedback text-sm font-normal

/popover %bottom rounded-lg p-2 h-fit flex flex-col gap-2 w-fit @align="end" /textarea placeholder:text-gray-400 ring-white focus-visible:ring-gray-200 text-[13px] text-[#1E1F22] shadow-inner

/textarea placeholder:text-gray-400 ring-white focus-visible:ring-gray-200 text-[13px] text-[#1E1F22] shadow-inner

@placeHolder="Ideas to improve Layouts..."

/hstack w-full flex flex-row justify-between gap-7 items-start

/hstack gap-0 items-baseline

Preview in real-time on any device

Export well-engineered React

All the resources

Everything you need,
right where you need it

Everything you need,
right where you need it

Easy access to essential resources, utilities and components to help speed up your workflow.

100s of pre-built components

Components

accordion

A vertically stacked set of interactive headings that each reveal content.

alert

Displays a callout for a user's attention.

aspect ratio

Displays content within a desired range.

autolayout

A configurable stack component for people used to Figma.

avatar

An image element and a fallback for representing the user

badge

Displays a badge

button

A button to trigger an action.

calendar

The shadcn UI component

card

Displays a card with header, content, footer.

carousel

A carousel with motion and swipe.

center

Native HTML component

checkbox

A control that allows a user to toggle between checked and unchecked.

collapsible

An interactive component which expands /collapses a panel of content.

command

Fast, composable, unstyled command menu for React.

context menu

Displays a menu to the user - such as a set of actions or functions - triggered by a button.

data

Native HTML component

dialog

A modal in an overlay window - rendering content underneath it inert.

div

Insert a div block onto your page

dropdown-menu

Displays a menu to the user - such as a set of actions or functions - triggered by a button.

h1

This is a Hero section heading.

h2

Medium section heading.

h3

Small section heading.

hover card

For sighted users to preview content behind a link.

hstack

A horizontal stack of elements.

icon

Native HTML component

illustration

Native HTML component

image

Native HTML component

input

A form input field.

keyboard

Represents a keyboard key.

Label

label

Renders an accessible label associated with controls.

list

Native HTML compoent

logo

An image component that fetches the logo of any company off the internet.

menubar

A visually persistent menu common in desktop applications that provides quick access to common set of commands.

navigation-menu

A collection of links for navigating websites.

page

Creates a page for your app.

pagination

Pagination with page navigation + next and previous links.

popover

Displays rich content in a portal triggered by the parent button or link.

progress

An indicator showing the completion progress of a task.

resizable

Accessible resizable panel groups and layouts with keyboard support.

scroll-area

Native HTML component

select

Displays a list of options for the user to choose from, triggered by a button.

separator

Visually or semantically separates content.

sheet

Extends the dialog component to display content that compliments the main content on screen.

skeleton

Use to display a placeholder while content loads.

slider

An input where a user selects a value from within a given range.

switch

A control that allows the user to toggle an action on and off.

table

A responsive table element.

tabs

Displays rich content in a portal, triggered by a button

text area

Native HTML element

toggle

A two-state button that can be either on or off.

toggle group

A set of two-state button that can be either on or off.

tooltip

A popup that displays information related to an element on focus or hover.

vstack

A vertical stack of elements.

Components

accordion

A vertically stacked set of interactive headings that each reveal content.

alert

Displays a callout for a user's attention.

aspect ratio

Displays content within a desired range.

autolayout

A configurable stack component for people used to Figma.

avatar

An image element and a fallback for representing the user

badge

Displays a badge

button

A button to trigger an action.

calendar

The shadcn UI component

card

Displays a card with header, content, footer.

carousel

A carousel with motion and swipe.

center

Native HTML component

checkbox

A control that allows a user to toggle between checked and unchecked.

collapsible

An interactive component which expands /collapses a panel of content.

command

Fast, composable, unstyled command menu for React.

context menu

Displays a menu to the user - such as a set of actions or functions - triggered by a button.

data

Native HTML component

dialog

A modal in an overlay window - rendering content underneath it inert.

div

Insert a div block onto your page

dropdown-menu

Displays a menu to the user - such as a set of actions or functions - triggered by a button.

h1

This is a Hero section heading.

h2

Medium section heading.

h3

Small section heading.

hover card

For sighted users to preview content behind a link.

hstack

A horizontal stack of elements.

icon

Native HTML component

illustration

Native HTML component

image

Native HTML component

input

A form input field.

keyboard

Represents a keyboard key.

Label

label

Renders an accessible label associated with controls.

list

Native HTML compoent

logo

An image component that fetches the logo of any company off the internet.

menubar

A visually persistent menu common in desktop applications that provides quick access to common set of commands.

navigation-menu

A collection of links for navigating websites.

page

Creates a page for your app.

pagination

Pagination with page navigation + next and previous links.

popover

Displays rich content in a portal triggered by the parent button or link.

progress

An indicator showing the completion progress of a task.

resizable

Accessible resizable panel groups and layouts with keyboard support.

scroll-area

Native HTML component

select

Displays a list of options for the user to choose from, triggered by a button.

separator

Visually or semantically separates content.

sheet

Extends the dialog component to display content that compliments the main content on screen.

skeleton

Use to display a placeholder while content loads.

slider

An input where a user selects a value from within a given range.

switch

A control that allows the user to toggle an action on and off.

table

A responsive table element.

tabs

Displays rich content in a portal, triggered by a button

text area

Native HTML element

toggle

A two-state button that can be either on or off.

toggle group

A set of two-state button that can be either on or off.

tooltip

A popup that displays information related to an element on focus or hover.

vstack

A vertical stack of elements.

Components

accordion

A vertically stacked set of interactive headings that each reveal content.

alert

Displays a callout for a user's attention.

aspect ratio

Displays content within a desired range.

autolayout

A configurable stack component for people used to Figma.

avatar

An image element and a fallback for representing the user

badge

Displays a badge

button

A button to trigger an action.

calendar

The shadcn UI component

card

Displays a card with header, content, footer.

carousel

A carousel with motion and swipe.

center

Native HTML component

checkbox

A control that allows a user to toggle between checked and unchecked.

collapsible

An interactive component which expands /collapses a panel of content.

command

Fast, composable, unstyled command menu for React.

context menu

Displays a menu to the user - such as a set of actions or functions - triggered by a button.

data

Native HTML component

dialog

A modal in an overlay window - rendering content underneath it inert.

div

Insert a div block onto your page

dropdown-menu

Displays a menu to the user - such as a set of actions or functions - triggered by a button.

h1

This is a Hero section heading.

h2

Medium section heading.

h3

Small section heading.

hover card

For sighted users to preview content behind a link.

hstack

A horizontal stack of elements.

icon

Native HTML component

illustration

Native HTML component

image

Native HTML component

input

A form input field.

keyboard

Represents a keyboard key.

Label

label

Renders an accessible label associated with controls.

list

Native HTML compoent

logo

An image component that fetches the logo of any company off the internet.

menubar

A visually persistent menu common in desktop applications that provides quick access to common set of commands.

navigation-menu

A collection of links for navigating websites.

page

Creates a page for your app.

pagination

Pagination with page navigation + next and previous links.

popover

Displays rich content in a portal triggered by the parent button or link.

progress

An indicator showing the completion progress of a task.

resizable

Accessible resizable panel groups and layouts with keyboard support.

scroll-area

Native HTML component

select

Displays a list of options for the user to choose from, triggered by a button.

separator

Visually or semantically separates content.

sheet

Extends the dialog component to display content that compliments the main content on screen.

skeleton

Use to display a placeholder while content loads.

slider

An input where a user selects a value from within a given range.

switch

A control that allows the user to toggle an action on and off.

table

A responsive table element.

tabs

Displays rich content in a portal, triggered by a button

text area

Native HTML element

toggle

A two-state button that can be either on or off.

toggle group

A set of two-state button that can be either on or off.

tooltip

A popup that displays information related to an element on focus or hover.

vstack

A vertical stack of elements.

Robust image and icon libraries

Get started

See the difference

Timeless syntax,
faster shipping

A simpler syntax that feels like good ole HTML with TailwindCSS for styling.
Design in a familiar way, then export production-ready React code.

A simpler syntax that feels like good ole HTML with TailwindCSS for styling. Design in a familiar way, then export production-ready React code.

Watch demo

Try it today

Built for developers

Tools that work the way you do

Tools that work
the way you do

We crafted Layouts to fit seamlessly into your workflow, whether you're prototyping or building production-ready interfaces

Keyboard-first driven actions.

shift

▲

▼

Keyboard-first driven actions.

shift

▲

▼

Keyboard-first driven actions.

shift

▲

▼

Context-aware documentation.

Testimonials

Kind words from folks
building on Layouts

Kind words from folks
building on Layouts

Layouts has become my go-to development tool for building interfaces. It's saved me hundreds of thousands of dollars in development costs.

Josh Wirth

CEO, Daly Energy

Layouts has become my go-to development tool for building interfaces. It's saved me hundreds of thousands of dollars in development costs.

Gawen Arab

CTO, Airbuds.fm

Layouts has become my go-to development tool for building interfaces. It's saved me hundreds of thousands of dollars in development costs.

Dahlia Amade

Sr. Frontend Developer

AI as your creative partner

AI as your creative partner

Prompt to TailwindCSS

Ever wish you could just tell your code what you want? Inline AI turns your casual descriptions into TailwindCSS classes,
no mind-reading required.

Features:

  • Describe your style, get Tailwind

  • Tweak and learn

  • No need for perfect syntax

  • And more coming soon…

Get started

Seamless NextJS integration

Instant syncing

Sync your Layouts project with a local NextJS project using our CLI tool.
No double setup, just create and go.

Features:

  • Automatic updates

  • Maintain design consistency from prototype to production

  • Accelerate your React workflow

Upgrade to Pro

Go to docs

> npx layouts.dev init lyeq5t1b

Seamless NextJS integration

Instant syncing

Sync your Layouts project with a local NextJS project using our CLI tool.
No double setup, just create and go.

Features:

  • Automatic updates

  • Maintain design consistency from prototype to production

  • Accelerate your React workflow

Upgrade to Pro

Go to docs

> npx layouts.dev init lyeq5t1b

Seamless NextJS integration

Instant syncing

Sync your Layouts project with a local NextJS project using our CLI tool.
No double setup, just create and go.

Features:

  • Automatic updates

  • Maintain design consistency from prototype to production

  • Accelerate your React workflow

Upgrade to Pro

Go to docs

> npx layouts.dev init lyeq5t1b

Code visually.
Build rapidly.
Deploy anywhere.

Start for free

Layouts.dev

Beta

Layouts.dev - The fastest way to build Tailwind + shadcn/ui pages | Product Hunt

Product

Pricing

Changelog

Connect

Contact

Discord

X

Resources

Docs

Terms of Service

Privacy Policy

Resources

Docs

Terms of Service

Privacy Policy

© 2024 Creative Robots Inc.

Code visually.
Build rapidly.
Deploy anywhere.

Start for free

Layouts.dev

Beta

Layouts.dev - The fastest way to build Tailwind + shadcn/ui pages | Product Hunt

Product

Pricing

Changelog

Connect

Contact

Discord

X

Resources

Docs

Terms of Service

Privacy Policy

Resources

Docs

Terms of Service

Privacy Policy

© 2024 Creative Robots Inc.