Skeleton

import { Skeleton } from "@grassroot/ui-react";
 
<Skeleton circle className="h-10 w-10" />
<Skeleton className="h-3 w-3/4" />
<Skeleton className="h-3 w-1/2" />

<script setup lang="ts">
import { Skeleton } from "@grassroot/ui-vue";
</script>
 
<template>
  <Skeleton circle class-name="h-10 w-10" />
  <Skeleton class-name="h-3 w-3/4" />
  <Skeleton class-name="h-3 w-1/2" />
</template>

import { Component } from "@angular/core";
import { GrassrootSkeleton } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootSkeleton],
  template: `
    <grassroot-skeleton [circle]="true" className="h-10 w-10" />
    <grassroot-skeleton className="h-3 w-3/4" />
    <grassroot-skeleton className="h-3 w-1/2" />
  `,
})
export class ExampleComponent {
}

<script lang="ts">
  import { Skeleton } from "@grassroot/ui-svelte";
</script>
 
<Skeleton circle className="h-10 w-10" />
<Skeleton className="h-3 w-3/4" />
<Skeleton className="h-3 w-1/2" />

import { Skeleton } from "@grassroot/ui-solid";
 
export function Example() {
  return (
    <>
      <Skeleton circle className="h-10 w-10" />
      <Skeleton className="h-3 w-3/4" />
      <Skeleton className="h-3 w-1/2" />
    </>
  );
}