Skeleton

Use to show a placeholder while content is loading.

import { styled } from "styled-system/jsx";
import { Skeleton } from "@/components/ui/skeleton";

export default function SkeletonDemo() {
  return (
    <styled.div css={{ display: "flex", alignItems: "center", spaceX: "4" }}>
      <Skeleton css={{ w: "12", h: "12", rounded: "full" }} />
      <styled.div css={{ spaceY: "2" }} className="space-y-2">
        <Skeleton css={{ w: "250px", h: "4" }} />
        <Skeleton css={{ w: "250px", h: "4" }} />
      </styled.div>
    </styled.div>
  );
}

Installation

npx nore-ui-cli@latest add skeleton

Usage

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

<Skeleton css={{ w: "100px", h: "20px", rounded: "full" }} />

Examples

import { styled } from "styled-system/jsx";
import { Skeleton } from "@/components/ui/skeleton";

export default function SkeletonCard() {
  return (
    <styled.div css={{ display: "flex", flexDir: "column", spaceY: "3" }}>
      <Skeleton css={{ w: "250px", h: "125px", rounded: "xl" }} />
      <styled.div css={{ spaceY: "2" }}>
        <Skeleton css={{ w: "250px", h: "4" }} />
        <Skeleton css={{ w: "200px", h: "4" }} />
      </styled.div>
    </styled.div>
  );
}