Lookbook Demo
x
1
2
3
4
5
6
7
8
9
<div class="text-center border-2 border-dashed border-gray-300 p-8 rounded-lg">
  <svg class="mx-auto h-12 w-12 text-gray-300 mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
  </svg>
  <h3 class="text-lg font-bold text-gray-900 mb-2">This is the title</h3>
  <div class="text-sm text-gray-500">
    Nothing here yet. Just waiting for your content!
  </div>
</div>
1
2
3
4
5
render Feedback::BlankSlateComponent.new(with_icon: icon) do |slate|
  slate.with_title { title } if title.present?
  slate.with_action { text } if text.present?
  content
end

Another example with multiple editable preview params

This example also sets uses a @display tag to set a max width that this component can grow to.

Param Description Input

Show/hide the icon

—

—

Some recommended button text samples

This is a custom panel! See the documentation for details on how to add custom panels to your Lookbook instance.

No assets to display.
Check out the button component preview to see an example with asset files.