Скелетон

Блок-заповнювач, що пульсує, для карток, аватарів і таблиць під час завантаження даних — з товстими рамками в стилі необруталізму.

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

export function SkeletonDemo() {

Skeleton — пульсуючий placeholder, що тримає форму фрагмента UI, поки завантажуються дані. Це один div — без примітиву під ним — з animate-pulse, приглушеним фоном і товстою рамкою з рецепту необруталізму.

Коли це стане в пригоді:

Картки та списки — віддзеркалюйте фінальний макет, щоб контент з’являвся без зсуву.
Аватари та медіа — резервуйте коло чи мініатюру, перш ніж прибуде зображення.
Таблиці та форми — тримайте рядки й поля на місці під час повільного fetch.

Встановлення


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

Скопіюйте та вставте наведений код у свій проєкт.

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 }

Оновіть шляхи імпорту відповідно до налаштувань вашого проєкту.

Використання

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

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

Приклади

Avatar

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

export function SkeletonAvatar() {

Картка

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

Текст

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

export function SkeletonText() {

Форма

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

export function SkeletonForm() {

Таблиця

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

export function SkeletonTable() {

RTL

Щоб увімкнути підтримку RTL у Neobrutalism, перегляньте посібник із налаштування RTL.

"use client"

import * as React from "react"

Доступність

Skeleton — декоративні: ховайте їх від допоміжних технологій через aria-hidden="true", щоб програми зчитування з екрана не оголошували порожні пульсуючі блоки. Стан завантаження передавайте окремо: ставте aria-busy="true" на регіон, що завантажується, або оновлюйте візуально приховану live region («Завантаження результатів…»), яка очищується, коли з’являється контент. Щойно справжній вміст відрендерено, повністю приберіть skeleton з DOM.