Card Title
This is the card bodyProtos Components
Typography
XL Hello, world!
XL Hello, world!
Hello, world!
Hello, world!
Hello, world!
- This is some paragraph text with an inline link
# frozen_string_literal: true module Features class Typography < Component include Protos::Typography # This will override h1-h4 + p and add inline_a def view_template ul class: "flex flex-col gap-xs" do li { h1(size: :xl) { "XL Hello, world!" } } li { h2(size: :lg) { "XL Hello, world!" } } li { h3(size: :md) { "Hello, world!" } } li { h4(size: :sm) { "Hello, world!" } } li { h4(size: :xs) { "Hello, world!" } } li do plain "This is some paragraph text " inline_a(href: "https://example.com") { "with an inline link" } end end end end end
Buttons
# frozen_string_literal: true module Features class Buttons < Component def view_template ul(class: "flex flex-wrap gap-sm") do li { button(class: "btn") { "Button" } } li { button(class: "btn btn-primary") { "Primary Button" } } li { button(class: "btn btn-secondary") { "Secondary Button" } } li { button(class: "btn btn-info") { "Info Button" } } li { button(class: "btn btn-success") { "Success Button" } } li { button(class: "btn btn-warning") { "Warning Button" } } li { button(class: "btn btn-error") { "Error Button" } } end end end end
Badges
- Badge
- Primary Badge
- Secondary Badge
- Info Badge
- Success Badge
- Warning Badge
- Error Badge
# frozen_string_literal: true module Features class Badges < Component def view_template ul(class: "flex flex-wrap gap-sm") do li { span(class: "badge") { "Badge" } } li { span(class: "badge badge-primary") { "Primary Badge" } } li { span(class: "badge badge-secondary") { "Secondary Badge" } } li { span(class: "badge badge-info") { "Info Badge" } } li { span(class: "badge badge-success") { "Success Badge" } } li { span(class: "badge badge-warning") { "Warning Badge" } } li { span(class: "badge badge-error") { "Error Badge" } } end end end end
Comboboxes
# frozen_string_literal: true module Features class Comboboxes < Component def view_template render Protos::Combobox.new do |c| c.trigger(class: "btn btn-primary") { "Select an option" } c.content do c.list(class: "border rounded-box bg-base-300") do c.input(placeholder: "Search...") c.empty { "No results found" } c.group do c.title { "Quick links" } c.item { a(href: "#") { "Calendar" } } c.item { a(href: "#") { "Projects" } } end end end end end end end
Commands
# frozen_string_literal: true module Features class Commands < Component def view_template render Protos::Command.new do |c| c.trigger(class: "btn btn-primary") do span { "Open" } end c.dialog do c.list do c.input(placeholder: "Search...") c.empty { "No results found" } c.group do c.title { "Suggestions" } c.item { a(href: "#") { "Calendar" } } c.item { a(href: "#") { "Search Emoji" } } end c.group do c.title { "Settings" } c.item { a(href: "#") { "Profile" } } c.item { a(href: "#") { "Mail" } } c.item { a(href: "#") { "Settings" } } end end end end end end end
Drawers
# frozen_string_literal: true module Features class Drawers < Component def view_template render Protos::Drawer.new(id: "some_id") do |c| c.content do c.trigger(class: "btn btn-primary") { "Open Drawer" } end c.side(class: "z-[999]") do ul(class: css[:menu]) do li { a { "Main Menu" } } end end end end private def theme { menu: tokens( "menu", "p-4", "w-80", "min-h-full", "bg-base-200", "text-base-content" ) } end end end
Modals
# frozen_string_literal: true module Features class Modals < Component def view_template render Protos::Modal.new do |c| c.trigger(class: "btn btn-primary") { "Open Modal" } c.dialog do span { "This is the modal content." } c.close_button(class: "btn") { "Close" } end end end end end
Dropdowns
Accordions
- Accordion Item 1 Content
- Accordion Item 2 Content
# frozen_string_literal: true module Features class Accordions < Component def view_template render Protos::Accordion.new do |c| c.item(class: "border") do c.title { "Accordion Item 1" } c.content { "Accordion Item 1 Content" } end c.item(class: "border") do c.title { "Accordion Item 2" } c.content { "Accordion Item 2 Content" } end end end end end
Alerts
Hello world# frozen_string_literal: true module Features class Alerts < Component def view_template render Protos::Alert.new do |c| c.icon do icon("check-circle") end plain "Hello world" c.actions do button(class: "btn btn-primary btn-sm btn-circle") do icon("x-circle", variant: :outline) end end end end end end
Avatars
NT# frozen_string_literal: true module Features class Avatars < Component def view_template div(class: "flex gap-sm items-center") do with_placeholder with_image end end private def with_image render Protos::Avatar.new( indicator: "online", shape: "circle", theme: { figure: "bg-base-content text-neutral w-12" } ) do |c| c.img(src: "https://i.pravatar.cc/300", alt: "NT") end end def with_placeholder render Protos::Avatar.new( placeholder: true, class: "text-base-100", shape: :circle, theme: { figure: "p-sm bg-base-content" } ) do |c| c.plain("NT") end end end end
Chat Bubbles
- Robert A. CaroHey, how's it going?
- YouPretty good, you?
# frozen_string_literal: true module Features class ChatBubbles < Component def view_template ul class: "space-y-md" do li do render Protos::ChatBubble.new do |c| c.header { "Robert A. Caro" } c.content { "Hey, how's it going?" } end end li do render Protos::ChatBubble.new(align: :end) do |c| c.header { "You" } c.content(type: :primary) { "Pretty good, you?" } end end end end end end
Collapses
This is the collapse content# frozen_string_literal: true module Features class Collapses < Component def view_template render Protos::Collapse.new(class: "border") do |c| c.title { "Toggle" } c.content { "This is the collapse content" } end end end end
Lists
- Item 1
- Item 2
- Item 3
# frozen_string_literal: true module Features class Lists < Component def view_template render Protos::List.new do |c| c.item(class: "border p-sm") { "Item 1" } c.item(class: "border p-sm") { "Item 2" } c.item(class: "border p-sm") { "Item 3" } end end end end
Popovers
# frozen_string_literal: true module Features class Popovers < Component def view_template render Protos::Popover.new do |c| c.trigger(class: "btn btn-primary") { "Open Popover" } c.content(theme: { container: "transition-all" }) do ul(class: "menu border rounded-box") do li { a(href: "#") { "Item 1" } } li { a(href: "#") { "Item 2" } } li { a(href: "#") { "Item 3" } } end end end end end end
Tables
Table Caption Name Age Status Location John Doe 28 Active North Pole Jane Smith 33 Active South Pole # frozen_string_literal: true module Features class Tables < Component def view_template render Protos::Table.new do |c| c.caption { "Table Caption" } c.header do c.row do c.head { "Name" } c.head { "Age" } c.head { "Status" } c.head { "Location" } end end c.body do c.row do c.cell { "John Doe" } c.cell { "28" } c.cell do span(class: "badge badge-info") { "Active" } end c.cell { "North Pole" } end c.row do c.cell { "Jane Smith" } c.cell { "33" } c.cell { span(class: "badge badge-info") { "Active" } } c.cell { "South Pole" } end end end end end end
Timelines
- 1984First Macintosh computer
- 1985First Windows computer
- 1998iMac
# frozen_string_literal: true module Features class Timelines < Component def view_template events = [ ["1984", "First Macintosh computer", false, true], ["1985", "First Windows computer", true, true], ["1998", "iMac", true, false] ] render Protos::Timeline.new do |c| events.each do |date, content, start, finish| c.item do hr(class: "bg-base-100") if start c.left do span(class: "badge badge-accent") { date } end c.center do div(class: "w-6 h-6") { icon("check-circle") } end c.right(class: "timeline-box") do span { content } end hr(class: "bg-base-100") if finish end end end end end end
Breadcrumbs
# frozen_string_literal: true module Features class Breadcrumbs < Component def view_template render Protos::Breadcrumbs.new do |c| c.crumb do a(href: "#", class: "gap-2") do icon("home", size: :sm) span { "Home" } end end c.crumb { a(href: "#") { "Accounts" } } c.crumb { a(href: "#") { "Joe" } } c.crumb { "Edit" } end end end end
Carousels
# frozen_string_literal: true module Features class Carousels < Component def view_template render Protos::Carousel.new( class: "rounded-box", snap_to: :end ) do |c| images.each do |image| c.item { img(src: image, alt: "Random image") } end end end private def images [ "https://daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.jpg", "https://daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.jpg", "https://daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.jpg", "https://daisyui.com/images/stock/photo-1494253109108-2e30c049369b.jpg", "https://daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.jpg" ] end end end
Cards
# frozen_string_literal: true module Features class Cards < Component def view_template render Protos::Card.new( border: true, class: "bg-base-content text-neutral max-w-[300px]" ) do |c| c.image { img(src: image_url, alt: "Placeholder Image") } c.body do c.title { "Card Title" } span { "This is the card body" } end end end private def image_url "https://images.unsplash.com/photo-1709418359735-9cf3b793558d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" end end end
Heroes
Hello, world!
# frozen_string_literal: true module Features class Heroes < Component include Protos::Typography def view_template render Protos::Hero.new( class: "h-96 rounded-box", style: "background-image: url(https://daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.jpg);" ) do |c| c.overlay(class: "opacity-90") c.content do h1(class: "text-white") { "Hello, world!" } end end end end end
Stats
Total orders1,200Total sales$1,200Avg. order value$1.00# frozen_string_literal: true module Features class Stats < Component def view_template render Protos::Stats.new do |c| c.stat do c.title { "Total orders" } c.value { "1,200" } end c.stat do c.title { "Total sales" } c.value { "$1,200" } end c.stat do c.title { "Avg. order value" } c.value { "$1.00" } end end end end end
Swaps
# frozen_string_literal: true module Features class Swaps < Component def view_template render Protos::Swap.new do |c| c.on { icon("check-circle", size: :lg) } c.off { icon("x-circle", size: :lg) } end end end end
Tabs
Content 1Content 2Content 3# frozen_string_literal: true module Features class Tabs < Component def view_template render Protos::Tabs.new do |c| c.tab(id: "tabs", label: "Tab 1", class: css[:item]) { "Content 1" } c.tab(id: "tabs", label: "Tab 2", class: css[:item]) { "Content 2" } c.tab(id: "tabs", label: "Tab 3", class: css[:item]) { "Content 3" } end end private def theme { item: tokens( "rounded-box", "border", "p-sm", "bg-base-100" ) } end end end
Toasts
# frozen_string_literal: true module Features class Toasts < Component def view_template render Protos::Toast.new do |toast| render Protos::Alert.new( type: :success, class: "flex items-center flex-nowrap" ) do |alert| plain("Hey, how's it going?") alert.actions(class: "inline-flex") do toast.close_button do icon("x-circle", variant: :outline) end end end end end end end