Skeleton

Docs

Skeleton

Use to show a placeholder while content is loading.

Preview

Code

import { UbSkeletonDirective } from '@/components/ui/skeleton'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'skeleton-demo-new-york',
  imports: [UbSkeletonDirective],
  template: `
    <div class="flex items-center space-x-4">
        <div ubSkeleton class="h-12 w-12 rounded-full"></div>
        <div class="space-y-2">
        <div ubSkeleton class="h-4 w-[250px]"></div>
        <div ubSkeleton class="h-4 w-[200px]"></div>
        </div>
    </div>
  `,
})
export class SekeletonDemoNewYork { }

import { UbSkeletonDirective } from '@/components/ui/skeleton'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'skeleton-demo-default',
  imports: [UbSkeletonDirective],
  template: `
    <div class="flex items-center space-x-4">
        <div ubSkeleton class="h-12 w-12 rounded-full"></div>
        <div class="space-y-2">
        <div ubSkeleton class="h-4 w-[250px]"></div>
        <div ubSkeleton class="h-4 w-[200px]"></div>
        </div>
    </div>
    `,
})
export class SekeletonDemoDefault { }

Installation

CLI

Manual

npx shadcn-ng@latest add skeleton

Copy and paste the following code into your project.

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

import { computed, Directive, input } from '@angular/core'

@Directive({
  selector: '[ubSkeleton]',
  standalone: true,
  host: {
    '[class]': 'computedClass()',
  },
})
export class UbSkeletonDirective {
  readonly class = input<string>()
  protected computedClass = computed(() =>
    cn('animate-pulse rounded-md bg-muted', this.class()),
  )
}

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

import { computed, Directive, input } from '@angular/core'

@Directive({
  selector: '[ubSkeleton]',
  standalone: true,
  host: {
    '[class]': 'computedClass()',
  },
})
export class UbSkeletonDirective {
  readonly class = input<string>()
  protected computedClass = computed(() =>
    cn('animate-pulse rounded-md bg-primary/10', this.class()),
  )
}

Update the import paths to match your project setup.

Usage

import { UbSkeletonDirective } from "@/components/ui/sekeleton.directive";

<div ubSkeleton class="w-[100px] h-[20px] rounded-full"></div>

Examples

Card

Preview

Code

import { UbSkeletonDirective } from '@/components/ui/skeleton'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'sekeleton-card-new-york',
  imports: [UbSkeletonDirective],
  template: `
    <div class="flex flex-col space-y-3">
        <div ubSkeleton class="h-[125px] w-[250px] rounded-xl"></div>
        <div class="space-y-2">
        <div ubSkeleton class="h-4 w-[250px]"></div>
        <div ubSkeleton class="h-4 w-[200px]"></div>
        </div>
    </div>
    `,
})
export class SekeletonCardNewYork { }

import { UbSkeletonDirective } from '@/components/ui/skeleton'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'skeleton-card-default',
  imports: [UbSkeletonDirective],
  template: `
    <div class="flex flex-col space-y-3">
        <div ubSkeleton class="h-[125px] w-[250px] rounded-xl"></div>
        <div class="space-y-2">
            <div ubSkeleton class="h-4 w-[250px]"></div>
            <div ubSkeleton class="h-4 w-[200px]"></div>
        </div>
    </div>
    `,
})
export class SekeletonCardDefault { }

Separator Switch