Downcity
Components

Skeleton

Use for loading placeholders while content is still pending

Skeleton

Skeleton is the loading placeholder primitive.

Import

import { Skeleton } from "@downcity/ui";

Basic Example

import { Card, CardContent, Skeleton } from "@downcity/ui";

export function LoadingCard() {
  return (
    <Card className="max-w-md">
      <CardContent className="flex flex-col gap-3">
        <Skeleton className="h-5 w-40" />
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-2/3" />
      </CardContent>
    </Card>
  );
}

Usage Notes

  • Shape it through className
  • Keep the skeleton layout close to the final layout
  • Do not render real content inside Skeleton

Sheet

Use for side panels, drawers, and longer contextual editing flows

Tabs

Use for same-level content switching and panel segmentation

Table of Contents

SkeletonImportBasic ExampleUsage Notes