Skeleton

Use to show a placeholder while content is loading.

## Cài đặt

React

npx @galaxy-stack/nebula-cli add skeleton

Vue

npx @galaxy-stack/nebula-cli add skeleton

Angular

npx @galaxy-stack/nebula-cli add skeleton

Usage

React

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

export default function SkeletonDemo() {
  return (
    <div className="flex items-center space-x-4">
      <Skeleton variant="circle" className="h-12 w-12" />
      <div className="space-y-2">
        <Skeleton variant="text" className="h-4 w-[250px]" />
        <Skeleton variant="text" className="h-4 w-[200px]" />
      </div>
    </div>
  )
}

Vue

<script setup lang="ts">
import { Skeleton } from '@/components/skeleton'
</script>

<template>
  <div class="flex items-center space-x-4">
    <Skeleton variant="circle" class="h-12 w-12" />
    <div class="space-y-2">
      <Skeleton variant="text" class="h-4 w-[250px]" />
      <Skeleton variant="text" class="h-4 w-[200px]" />
    </div>
  </div>
</template>

Angular

import { Component } from '@angular/core'
import { SkeletonComponent } from '@/components/skeleton'

@Component({
  selector: 'app-skeleton-demo',
  standalone: true,
  imports: [SkeletonComponent],
  template: `
    <div class="flex items-center space-x-4">
      <ui-skeleton variant="circle" class="h-12 w-12" />
      <div class="space-y-2">
        <ui-skeleton variant="text" class="h-4 w-[250px]" />
        <ui-skeleton variant="text" class="h-4 w-[200px]" />
      </div>
    </div>
  `
})
export class SkeletonDemo {}

API Reference

Props

Prop	Type	Default	Mô tả	Frameworks
variant	'default' | 'circle' | 'text'	'default'	Biến thể hình dạng skeleton	All
className	string	''	Class CSS bổ sung	All

Examples

Card Skeleton

React

<div className="flex flex-col space-y-3">
  <Skeleton className="h-[125px] w-[250px] rounded-xl" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-[250px]" />
    <Skeleton className="h-4 w-[200px]" />
  </div>
</div>

Avatar with Text

React

<div className="flex items-center space-x-4">
  <Skeleton variant="circle" className="h-12 w-12" />
  <div className="space-y-2">
    <Skeleton variant="text" className="h-4 w-[250px]" />
    <Skeleton variant="text" className="h-4 w-[200px]" />
  </div>
</div>

Accessibility

• Uses animate-pulse for smooth loading animation
• Muted colors to indicate loading state

Tác giả

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

Giấy phép

MIT © 2025 Bùi Trọng Hiếu (kevinbui)