45+ Canonical Skeleton Presets
Ready-made, responsive, responsive layouts for every common UI pattern. Fully customizable with 5 shape styles.
product-card
Product thumbnail, category badge, title, price line, buy button
<SkeletonPreset name="product-card" />card
Hero media, title heading, 2 paragraph lines, and action button
<SkeletonPreset name="card" />product-grid
Multi-column responsive grid of product cards
<SkeletonPreset name="product-grid" />product-detail
Large hero gallery, title, SKU badge, specs table, dual action buttons
<SkeletonPreset name="product-detail" />e-commerce-checkout
Multi-step address/payment form with order total sidebar summary
<SkeletonPreset name="e-commerce-checkout" />dashboard
Metric counter cards, performance gauge, and responsive chart blocks
<SkeletonPreset name="dashboard" />kpi-card
Metric headline, delta percent badge, and mini sparkline chart
<SkeletonPreset name="kpi-card" />chart-bar
Multi-bar vertical chart placeholder with axis guides
<SkeletonPreset name="chart-bar" />chart-line
Continuous curve line chart with data point vertices
<SkeletonPreset name="chart-line" />chart-pie
Circular donut segment breakdown with legend labels
<SkeletonPreset name="chart-pie" />kanban
Multi-column project board with draggable card blocks
<SkeletonPreset name="kanban" />timeline
Vertical chronological milestone event node track
<SkeletonPreset name="timeline" />calendar
7-column month grid with event indicator pills
<SkeletonPreset name="calendar" />table
Header column bar followed by N zebra data rows
<SkeletonPreset name="table" />list
Multi-item list container with avatar icons and trailing actions
<SkeletonPreset name="list" />list-item
Single avatar circle, primary title, subtitle, and chevron
<SkeletonPreset name="list-item" />inbox-list
Email/message rows with sender, subject snippet, and timestamp
<SkeletonPreset name="inbox-list" />notification-list
Alert rows with notification bell, message, and time badge
<SkeletonPreset name="notification-list" />order-list
E-commerce order numbers, status chips, price, and tracking link
<SkeletonPreset name="order-list" />search-results
Web search result items with URL breadcrumb, title, and excerpt
<SkeletonPreset name="search-results" />profile
Centered user avatar, name line, biography, and follow button
<SkeletonPreset name="profile" />profile-header
Wide cover photo banner with overlapping avatar circle
<SkeletonPreset name="profile-header" />feed-post
Author avatar, timestamp, post text, media embed, and 3 reaction buttons
<SkeletonPreset name="feed-post" />stories-row
Horizontal scroll row of circular story avatars with gradient borders
<SkeletonPreset name="stories-row" />reels
Vertical 9:16 mobile video container with right-side action rail
<SkeletonPreset name="reels" />social-story
Full screen story view with multi-segment top progress bars
<SkeletonPreset name="social-story" />comment-thread
Nested discussion comments with reply indentation levels
<SkeletonPreset name="comment-thread" />chat
Alternating left and right conversation message bubbles
<SkeletonPreset name="chat" />article
Wide hero banner, headline, author byline, and rich text blocks
<SkeletonPreset name="article" />news-feed
Editorial article cards with thumbnail, category, and date line
<SkeletonPreset name="news-feed" />media-card
Video player thumbnail with play button overlay and channel meta
<SkeletonPreset name="media-card" />video-player
16:9 widescreen player frame with bottom scrubber bar and play controls
<SkeletonPreset name="video-player" />music-player
Square album artwork, song title, scrubber timeline, and playback controls
<SkeletonPreset name="music-player" />code-block
Code editor frame with window dots, line numbers, and token lines
<SkeletonPreset name="code-block" />file-explorer
Hierarchical file tree with folder icons and indented files
<SkeletonPreset name="file-explorer" />form
Form title heading, 3 labeled input fields, and submit button
<SkeletonPreset name="form" />navbar
Brand logo block, horizontal link tabs, search input, and avatar
<SkeletonPreset name="navbar" />sidebar
Logo block, vertical menu items with icons, and profile footer
<SkeletonPreset name="sidebar" />tabs
Horizontal tab bar with active indicator and container placeholder
<SkeletonPreset name="tabs" />settings-page
Section headers, toggle rows with descriptions, and action buttons
<SkeletonPreset name="settings-page" />faq-accordion
Expandable question header cards with chevron indicators
<SkeletonPreset name="faq-accordion" />pricing-card
Tier badge, price line, 4 feature bullet points, and checkout button
<SkeletonPreset name="pricing-card" />testimonial
Customer quote block with avatar, name, and 5-star rating placeholder
<SkeletonPreset name="testimonial" />map-card
Interactive map container with pin locator and address card
<SkeletonPreset name="map-card" />hero-banner
Large centered headline, subtitle, badge, and dual CTA buttons
<SkeletonPreset name="hero-banner" />