Leave Yamada UI a star
StarSkeleton is a component that acts as a placeholder until content is loaded.
Description
The visual color appearance of the component.
Type
"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"Description
The color at the animation end.
Type
UIValue<"border" | Color | ({} & string) | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 318 more ... | "yellow.950">Description
The fadeIn duration in seconds. Requires isLoaded toggled to true in order to see the transition.
Type
string | numberDefault
0.4Description
If true, the skeleton will take the width of it's children.
Type
booleanDefault
falseDescription
If true, it'll render its children with a nice fade transition.
Type
booleanDefault
falseDescription
The size of the Skeleton.
Type
stringDescription
The animation speed in seconds.
Type
string | numberDefault
0.8Description
The color at the animation start.
Type
UIValue<"border" | Color | ({} & string) | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 318 more ... | "yellow.950">Description
The variant of the Skeleton.
Type
stringDescription
The color at the animation end.
Type
UIValue<"border" | Color | ({} & string) | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 318 more ... | "yellow.950">Description
The fadeIn duration in seconds. Requires isLoaded toggled to true in order to see the transition.
Type
string | numberDefault
0.4Description
If true, the skeleton will take the width of it's children.
Type
booleanDefault
falseDescription
If true, it'll render its children with a nice fade transition.
Type
booleanDefault
falseDescription
The animation speed in seconds.
Type
string | numberDefault
0.8Description
The color at the animation start.
Type
UIValue<"border" | Color | ({} & string) | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 318 more ... | "yellow.950">Description
The color at the animation end.
Type
UIValue<"border" | Color | ({} & string) | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 318 more ... | "yellow.950">Description
The fadeIn duration in seconds. Requires isLoaded toggled to true in order to see the transition.
Type
string | numberDefault
0.4Description
If true, it'll render its children with a nice fade transition.
Type
booleanDefault
falseDescription
The animation speed in seconds.
Type
string | numberDefault
0.8Description
The color at the animation start.
Type
UIValue<"border" | Color | ({} & string) | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 318 more ... | "yellow.950">Description
The CSS height property.
Type
UIValue<number | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | (string & {}) | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-max-content" | ... 68 more ... | "xs">Edit this page on GitHub