Skeleton

Generic dashboard loading scaffold for table, stats, detail, and form surfaces.

All components · Theme builder · Implementation source

Live preview

Open live skeleton preview

Install

netscript ui:add skeleton

Usage and examples

The preview runs this JSX with the installed components. Import any composed primitives from your UI directory.

import { useState } from 'preact/hooks';
import { Skeleton } from '@app/components/ui/skeleton.tsx';

export function Example() {
  const [value, setValue] = useState('standard');
  const [open, setOpen] = useState(false);
  const [notice, report] = useState('');
  return (<><div><Skeleton variant="table" rows={3} columns={3} /></div><p role="status">{notice}</p></>);
}

Props

Generated from native deno doc --json --private over the shipped implementation. Compound component props retain their owning interface; native attributes pass through where declared.

SkeletonProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "children">

Keyboard

Presentation component; no component-specific keyboard interactions.

Tokens

Semantic contract roles: radius/badge, radius/input, space/stack/gap, surface/muted.

CSS custom properties referenced directly: --ns-border, --ns-card, --ns-card-bg, --ns-card-border, --ns-fg, --ns-muted, --ns-radius-card, --ns-radius-control, --ns-radius-lg, --ns-radius-md, --ns-radius-sm, --ns-space-3, --ns-space-4, --ns-surface-raised.

Contract and compatibility

Accessibility pattern: noninteractive presentation

• Native DOM attributes pass through where the implementation accepts them.
• Compatibility values describe already-shipped headless or Utility state hooks. They are separate from the settled canonical design vocabulary and must be retained by styles serving these public APIs.

Design contract values marked planned are not implementation props. The props above describe what ships today.