Frames showcase your work as if they were displayed in a window. This is very similar to the existing Browser component but without some of the additional styling such as the browser toolbar.

Basic Frame

A basic frame is just a simple frame with no additional styling.

Preview
This is the content of the browser. You can put anything you want here.
Code
= daisy_frame(css: "w-full max-w-4xl border border-base-300") do |frame|
  .border-t.border-base-300.px-4.py-16.text-center
    This is the content of the browser. You can put anything you want here.

    .mt-4
      = image_tag("landscapes/desert.jpg", class: "max-w-lg mx-auto rounded-xl")

Styled Frame

You can style the frames however you like!

Preview

This is the content of the browser. You can put anything you want here.

Code
= daisy_frame(css: "w-full max-w-4xl bg-purple-200 border border-purple-600") do |frame|
  .bg-base-100.border-t.border-purple-300.px-4.py-16.text-center
    = image_tag("loco-logo.png", class: "max-w-xs mx-auto")

    %p
      This is the content of the browser. You can put anything you want here.

    .mt-4
      = image_tag("landscapes/desert.jpg", class: "max-w-lg mx-auto rounded-xl")
Made with by Profoundry .
Copyright © 2023-2025 Profoundry LLC.
All rights reserved.