Skeleton

The Skeleton component provides you with loading placeholders.

Live Examples

Storybook: components-skeleton--default

Storybook: components-skeleton--card-skeleton

Storybook: components-skeleton--text-skeleton

Examples

import { Skeleton } from '@nostromo/ui-core'
 
export default function SkeletonExample() {
  return (
    <div className="space-y-4">
      <Skeleton className="h-4 w-[250px]" />
      <Skeleton className="h-4 w-[200px]" />
      <Skeleton className="h-4 w-[150px]" />
    </div>
  )
}

Card Skeleton

import { Skeleton } from '@nostromo/ui-core'
 
export default function CardSkeleton() {
  return (
    <div className="space-y-4">
      <Skeleton className="h-4 w-[250px]" />
      <Skeleton className="h-4 w-[200px]" />
      <Skeleton className="h-4 w-[150px]" />
      <Skeleton className="h-4 w-[100px]" />
    </div>
  )
}

Props

Prop	Type	Default	Description
`className`	`string`	-	Custom CSS classes

Progress Card