daisyUI v5.6 is now available!

Window mockup

Window mockup shows a box that looks like an operating system window.

Class name		Type
mockup-window
Component
OS window mockup

window mockup with border

Hello!
<div class="$$mockup-window border border-base-300 w-full">
  <div class="grid place-content-center border-t border-base-300 h-80">Hello!</div>
</div>
<div class="$$mockup-window border border-base-300 w-full">
  <div class="grid place-content-center border-t border-base-300 h-80">Hello!</div>
</div>

window mockup with background color

Hello!
<div class="$$mockup-window bg-base-100 border border-base-300">
  <div class="grid place-content-center h-80">Hello!</div>
</div>
<div class="$$mockup-window bg-base-100 border border-base-300">
  <div class="grid place-content-center h-80">Hello!</div>
</div>
Do you have a question? Ask on GitHub or Discord server
Do you see a bug? open an issue on GitHub
Do you like daisyUI? Post about it!
Support daisyUI's development: Open Collective
BLUEPRINT

Official daisyUI
Code Generator
MCP server

Generate daisyUI code with any LLM

More details
Please upgrade your browser