125k

Skeleton

コンテンツの読み込み中にプレースホルダーを表示します。

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

export function SkeletonDemo() {

インストール

pnpm dlx shadcn@latest add skeleton

使い方

import { Skeleton } from "@/components/ui/skeleton"
<Skeleton className="h-[20px] w-[100px] rounded-full" />

アバター

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

export function SkeletonAvatar() {

カード

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

テキスト

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

export function SkeletonText() {

フォーム

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

export function SkeletonForm() {

テーブル

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

export function SkeletonTable() {

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイドを参照してください。

"use client"

import * as React from "react"