Skeleton

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download skeleton -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { Skeleton } from "@/components/ui/skeleton";
import * as UI from "@/components/ui/skeleton";

const Component = UI.Skeleton;

const args = {
  "width": 240,
  "height": 80,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Skeleton :style="{ width: args.width + 'px', height: args.height + 'px' }" />
</template>

Examples

Default

<script setup lang="ts">
import { Skeleton } from "@/components/ui/skeleton";
import * as UI from "@/components/ui/skeleton";

const Component = UI.Skeleton;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

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

Card

<script setup lang="ts">
import { Skeleton } from "@/components/ui/skeleton";
import * as UI from "@/components/ui/skeleton";

const Component = UI.Skeleton;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

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

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.