Something went wrong. Try again.
A design system in a box. hip-ui.tngl.io/docs/introduction
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930import { Flex } from "@/components/flex";import { Skeleton, SkeletonGroup } from "@/components/skeleton";import { size as sizeSpace } from "@/components/theme/semantic-spacing.stylex";
export function Basic() { return ( <SkeletonGroup> <Flex direction="column" gap="2xl"> <Flex align="center" gap="xl"> <Skeleton variant="circle" size="md" /> <Flex direction="column" gap="md"> <Skeleton variant="rectangle" height={sizeSpace["2xl"]} width="80px" /> <Skeleton variant="rectangle" height={sizeSpace.md} width="120px" /> </Flex> </Flex> <Flex direction="column" gap="md"> <Skeleton variant="rectangle" height={sizeSpace.md} width="100%" /> <Skeleton variant="rectangle" height={sizeSpace.md} width="100%" /> <Skeleton variant="rectangle" height={sizeSpace.md} width="100%" /> <Skeleton variant="rectangle" height={sizeSpace.md} width="120px" /> </Flex> </Flex> </SkeletonGroup> );}