Skelet

Een knipperend plaatshouderblok voor kaarten, avatars en tabellen terwijl de gegevens worden geladen — met die neobrutalistische dikke randen.

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

export function SkeletonDemo() {

De skeleton is een pulserende placeholder die de vorm van een stuk UI vasthoudt terwijl de bijbehorende data laadt. Het is één enkele div — zonder primitive eronder — met animate-pulse, een gedempte achtergrond en de dikke rand uit het neobrutalistische recept.

Ideaal voor:

Kaarten en lijsten — spiegel de uiteindelijke lay-out, zodat inhoud verschijnt zonder verspringing.
Avatars en media — reserveer de cirkel of het thumbnailvak voordat de afbeelding binnenkomt.
Tabellen en formulieren — houd rijen en velden op hun plek tijdens een trage fetch.

Installatie


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/skeleton.json
npx shadcn@latest add https://neobrutalism.com/r/base/skeleton.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/skeleton.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/skeleton.json

Kopieer en plak de volgende code in je project.

components/ui/skeleton.tsx

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

function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="skeleton"
      className={cn("animate-pulse rounded border-2 bg-muted", className)}
      {...props}
    />
  )
}

export { Skeleton }

Werk de import-paden bij zodat ze overeenkomen met je projectconfiguratie.

Gebruik

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

<Skeleton className="h-[20px] w-[100px] rounded-full" />

Voorbeelden

Avatar

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

export function SkeletonAvatar() {

Kaart

import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

Tekst

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

export function SkeletonText() {

Formulier

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

export function SkeletonForm() {

Tabel

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

export function SkeletonTable() {

RTL

Om RTL-ondersteuning in Neobrutalism in te schakelen, zie de RTL-configuratiegids.

"use client"

import * as React from "react"

Toegankelijkheid

Skeletons zijn decoratief — verberg ze voor ondersteunende technologie met aria-hidden="true", zodat schermlezers geen lege pulserende vakken voorlezen. Breng de laadstatus zelf apart over: zet aria-busy="true" op de regio die aan het laden is, of werk een visueel verborgen live-regio bij ("Resultaten laden…") die leeg wordt zodra de inhoud er is. Verwijder de skeletons volledig uit de DOM zodra de echte inhoud rendert.