RubyUIPre Release

Docs Components Themes

Docs Components Themes Github Discord Twitter

Getting Started

Introduction Installation Dark mode Theming Customizing components

Installation

Rails - JS Bundler Rails - Importmaps

Components41

Accordion Alert Alert Dialog Aspect Ratio Avatar Badge BreadcrumbNew Button Calendar Card Checkbox Checkbox Group Clipboard Codeblock Collapsible ComboboxUpdated Command Context Menu Date Picker Dialog / Modal Dropdown Menu Form Hover Card Input Link Masked Input PaginationNew Popover ProgressNew Radio ButtonNew SelectNew Sheet Shortcut Key SkeletonNew Switch Table Tabs Textarea Theme Toggle Tooltip Typography

Skeleton

Use to show a placeholder while content is loading.

Usage

Example

div(class: "flex items-center space-x-4") do
	Skeleton(class: "h-12 w-12 rounded-full")
	div(class: "space-y-2") do
		Skeleton(class: "h-4 w-[250px]")
		Skeleton(class: "h-4 w-[200px]")
	end
end

Copied!

Copy failed!

Installation

Using RubyUI CLI

Run the install command

rails g ruby_ui:component Skeleton

Copied!

Copy failed!

Manual installation

1

Add RubyUI::Skeleton to app/components/ruby_ui/skeleton.rb

# frozen_string_literal: true

module RubyUI
	class Skeleton < Base
		def view_template(&)
			div(**attrs, &)
		end

		private

		def default_attrs
			{
				class: "animate-pulse rounded-md bg-primary/10"
			}
		end
	end
end

Copied!

Copy failed!

Components

Component	Built using	Source
`Skeleton`	Phlex	See source