Dinachi
  • Docs
  • Playground

Getting started

—Conventions—Installation—CLI—Skills—LLMs

Foundations

—Theming

Integrations

—JSON Render—Playground

Form19

—Autocomplete—Button—Checkbox—Checkbox Group—Combobox—Field—Fieldset—Form—Input—Label—Number Field—OTP Field—Radio—Select—Slider—Switch—Textarea—Toggle—Toggle Group

Display5

—Accordion—Avatar—Badge—Collapsible—Text

Layout4

—Card—Scroll Area—Separator—Toolbar

Navigation4

—Link—Menubar—Navigation Menu—Tabs

Overlay8

—Alert Dialog—Context Menu—Dialog—Drawer—Menu—Popover—Preview Card—Tooltip

Feedback4

—Meter—Progress—Skeleton—Toast

Motion19

—Animated IconNew—Animated ListNew—Animated TabsNew—CarouselNew—Compare SliderNew—Expandable CardNew—Hold to ConfirmNew—Load TransitionNew—MarqueeNew—Number TickerNew—Progress RingNew—Scroll ProgressNew—Scroll RevealNew—SortableNew—Stagger ListNew—Streaming TextNew—Swipeable RowNew—Text MorphNew—Text ShimmerNew

Skeleton

A placeholder loading animation to indicate content is being loaded.

View Source

#Installation

npx @dinachi/cli@latest add skeleton

#Usage

tsx
import { Skeleton } from "@/components/ui/skeleton"

#Examples

#API Reference

PropTypeDefaultDescription
classNamestring—Classes to control size, shape, and border radius of the skeleton.
Previous:Separator
Next:Slider