Formance Design System
Getting Started
  • Introduction
  • Installation
  • Colors
  • Typography
  • Theming
Atoms
  • Introduction
  • Accordion
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Attachment
  • Avatar
  • Badge
  • Badge Eyebrow
  • Badge Status
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Code Editor
  • Code Snippet
  • Collapsible
  • Combobox
  • Command
  • Context Icon
  • Context Menu
  • Description List
  • Dialog
  • Drawer
  • Dropdown Menu
  • Empty
  • Endpoint
  • Eyebrow
  • Field
  • Form
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Input Password
  • Item
  • Kbd
  • Label
  • Loader
  • Menubar
  • Nav Tabs
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Radio Group Card
  • Radio Group Stacked
  • Resizable
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Sonner
  • Sortable
  • Spinner
  • Stepper
  • Switch
  • Table
  • Tabs
  • Textarea
  • Toggle
  • Toggle Group
  • Tooltip
  • Typography
Fragments
  • Introduction
  • API Snippet
  • App Card
  • App Card Empty
  • Copy Button
  • Copy Page
  • Data Table
  • Key Value Input
  • Ledger Schema
  • Ledger Schema Editor
  • Markdown
  • Mode Toggle
  • Multi Select
  • Page Container
  • Page Header
  • Page Section
  • SSO Button
Examples
  • Code
  • Forms
Brand
  • Formance Logo
  1. Docs
  2. Components
  3. Skeleton
Atoms

Skeleton

A placeholder loading state for content.

shadcn/uiBased on shadcn/ui with Formance brand styling.
Docs

Installation#

npx shadcn@latest add @formance/skeleton

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import { Skeleton } from '@/components/ui/skeleton'
<Skeleton className="h-4 w-[250px]" />

Examples#

Card#

Atoms
Sidebar
Atoms
Slider
On This Page
  • Installation
  • Usage
  • Examples
  • Card
Powered by
GitHubWebsite