Layouts.dev: A notebook for building interfaces with Tailwind & shadcn/UI
For designers
Design functional prototypes,
not just mockups
Layouts empowers you to bring your designs to life. Code your visions without complex programming knowledge.
Start building real prototypes
Prototype
Production
Notifications Dialog
A
Easily grab components and add @props
Style with TailwindCSS
Simple code and accessible component structure
See your design come to life in real-time
[Layouts
Private Beta](/content/site-root.html)
Open the app
Empowering Designers
Design that does more
Create functional prototypes that speak directly to developers and stakeholders. Experience the power of designs that do more than just look good—they work.
Intuitive code that feels like HTML+Tailwind
/div w-full items-center p-12 flex flex-col bg-[#F4F3F1]
/button %ghostpy-1.5 px-3 h-min hover:bg-white text-[#5B5E66] delay-0 gap-2 items-center
/icon message-square-plus
/textFeedback text-sm font-normal
/popover %bottomrounded-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
/div flex flex-col items-start
/grid %lg gap-4
Export well-engineered frontend code
From mockup to market
Create prototypes that don't need rebuilding
Seamless design to dev
Eliminate the gap between design and development.
Evolve ideas in real-time
Iterate on functional UIs not static mockups.
Cross-platform efficiency
Code once, launch across multiple platforms.
Design to market fast
Reduce time from concept to live product.
Common frustrations
Say bye to frontend headaches
Layouts.dev simplifies UI development without boxing you in.
Intuitive Layouts syntax for creating functional prototypes
Pre-built components for fast iteration
Check responsiveness across any device
Collaborate with developers on shippable prototypes
Open the app
Examples
Button
Dialog
Explore more components
Start building prototypes you can ship today
Open the app
Go to docs
Layouts.dev
Private beta
Product
Resources