Skeleton

Use to show a placeholder while content is loading.

Basic

Simple text-line placeholders.

Card

Skeleton layout mimicking a card with avatar and text.

Form

Skeleton layout for a loading form.

Table

Skeleton rows for a loading table.

Open Markdown
FreeSkeleton

Loading placeholders.

Install with the Proa CLI
proa ui add skeleton

Installs the reviewed component source, dependencies, shared support files, and required legal notices.

CLI and registry setup
recipe.rs
// SPDX-FileCopyrightText: 2026 Proa Labs, Inc.
// SPDX-License-Identifier: MIT OR Apache-2.0

//! Skeleton recipe - styling for loading placeholder

use crate::tw_join;
use proa_core::shared::attr_value::AttrValue;
use proa_core::{DataLoader, WebContext, WriteBuf, WriteError};

pub const SKELETON_BASE: &str = tw_join!("animate-pulse", "rounded-md", "bg-muted");

/// Optional author inputs for the Skeleton recipe.
#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
pub struct SkeletonRecipeProps;

/// Static named root for Skeleton.
#[derive(Debug, Clone, Copy)]
pub struct SkeletonRecipe {
    pub root: &'static str,
}

impl SkeletonRecipe {

Search

Type at least 2 characters

Customize

Make it yours

Palette

Radius

Overview
Components
Settings

Build your own

Themed Proa UI surface

Preview
Components52
RecipesTyped
customer-portal