Feedback v1.0.0

Skeleton

A loading placeholder component with three shape variants. Uses pulse animation to indicate loading state. Compose multiple skeletons to create card, list, or content loading placeholders.

Preview & Code

_skeleton.html.erb

███
  ████████ █████████ █████████

  ██████
    ███ ██████ █████████████████████ ██
    ███ ██████ ██████████████████████ ████████ ███████ ██
    ███ ██████ ██████████████████████ ████████ ███████████ █████ ███ ██
    ███ ██████ ██████████████████████ ██████ ███████ ██
██

Get Access to View Code

skeleton_component.rb

█ ██████████████████████ ████

█████ █████████████████ █ ███████████████████
  ████████ █ ███████ ██████ █████████████████
  █████ █ █████ ██ ██████████

  ███████████ █████████ ██████ ██████

  ███ ███████████████████ ██████ █████ ████ ██████ ████ ████████████████
    ████████ █ ██████████████

Get Access to View Code

skeleton_component.html.erb

████ ██████████ ████████████████ ██████████

Get Access to View Code

Options

Name	Type	Default	Description
`variant`	Symbol	`:text`	Shape type: :text (lines), :circle (avatars), :rectangle (images/cards)
`size`	Symbol	`:md`	Size preset: :sm, :md, :lg (dimensions vary by variant)
`width`	String	`nil`	Override width with Tailwind class (e.g., "w-3/4")
`class`	String	`""`	Additional CSS classes to apply

Name	Type	Default	Description
`variant`	Symbol	`:text`	Shape type: :text (lines), :circle (avatars), :rectangle (images/cards)
`size`	Symbol	`:md`	Size preset: :sm, :md, :lg (dimensions vary by variant)
`width`	String	`nil`	Override width with Tailwind class (e.g., "w-3/4")

Changelog v1.0.0

- Initial release with text, circle, and rectangle variants
- Pulse animation for loading indication
- Size presets (sm, md, lg) for each variant
- Dark mode support

Get Full Access

Unlock the source code for this component and all others. One-time payment for lifetime access.

Get Access Now