Neobrutalism components

Skeleton

import { cn } from '@/lib/utils'

function Skeleton({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn(
        'animate-pulse rounded-base bg-white dark:bg-secondaryBlack border-2 border-border dark:border-darkBorder',
        className,
      )}
      {...props}
    />
  )
}

export { Skeleton }

Usage

import { Skeleton } from '@/components/ui/skeleton'

<div className="flex items-center space-x-4">
  <Skeleton className="h-12 w-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 sm:w-[250px] w-[100px]" />
    <Skeleton className="h-4 sm:w-[200px] w-[100px]" />
  </div>
</div>

Edit this page