Скелетон

Мигающий заполнитель для карточек, аватаров и таблиц на время загрузки данных — с толстыми рамками в стиле необрутализма.

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

export function SkeletonDemo() {

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

Когда это пригодится:

Карточки и списки — зеркальте финальный layout, чтобы контент появлялся без сдвига.
Аватары и media — зарезервируйте круг или thumbnail, пока не пришло изображение.
Таблицы и формы — удерживайте строки и поля на месте во время медленного 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" на загружаемой области или обновление visually hidden live region («Загрузка результатов…»), которое очищается, когда контент появился. Как только настоящий контент отрендерился, уберите skeleton'ы из DOM целиком.