Layouts.dev

Zero lag. Instant previews. The way building should feel.

Use the /video component in layoutsdotdev to describe the video you need using natural language and we’ll find the closest match—instantly. No need to hunt through stock sites.

Tailwind maxxing

The easiest way to jumpstart your next idea? Remix existing projects on layoutsdotdev—spend less time setting up and more time creating.

Accelerate your design process with a library of pre-built HTML, layouts(dot)dev and @shadcn components available in our editor. We're continuously building out our lib. Which new components would you find most beneficial in your workflow?

Tired of manually picking colors? With /theme in layoutsdotdev, our AI palette generator crafts your perfect theme in seconds. Just describe the vibe.

Ever wish your Layouts files were more composable? With the new `/import ` component, now they are.🔥 Reuse pre-made snippets, UIs, tokens, classes, or entire screens across projects in seconds. Stop copy-pasting. Start composing. Type: `/import [insert your project ID]`

//Custom Classes If you need fine-grained control, create your own classes with the `/class` component. How: - Define your class: For example, blue = #0000ff; - Use it with a period prefix: When applying it in your code, it must start with . (e.g., .blue { color: #0000ff; })

// Tokens With our new `/token` component, you can create reusable design tokens for colors, spacing, typography, and more. How: - Add a token like primaryColor = #3498db; using the `/token` component. - Reference that token in any component & keep styles consistent.

Merry Christmas🎄 Introducing Tokens & Custom Classes 💥 Define and reuse styles for a faster, more consistent workflow. 🧵

In Layouts, create your own custom mesh gradients by using the `/bg-mesh` component and then specify visual parameters like seed, length, opacity, and base color using `@` attributes.

Big news for layouts.dev users You can now remix your projects with ease. ✨ Experiment without fear. ✨ Save different versions. Available now.

New feature release 🚀 Found the perfect Tailwind component online? Grab it. Paste it. Let layouts.dev convert it into layouts syntax and start iterating in seconds. It's your favorite workflow, supercharged. 💨

✨ Adding props, made simple. Streamline your workflow with intuitive prop suggestions and descriptions—making it easier than ever to customize components.

We're thrilled to hear how much designers are loving layouts.dev 🖤 Feedback like this keeps us inspired:

Images + Videos in layouts.dev Grab videos and images from our pre-integrated massive library of assets. Simply grab the `/image` or `/video` component and let your imagination be your guide.

@layoutsdev + @romboHQ Motion in layout.dev with tailwindcss-motion Shipping tomorrow🛫 inspo: @alex_krasikau