layout

Skeleton

GitHub

Display a placeholder while content is loading.

Usage

Use to show a placeholder while content is loading.

<template>
  <div class="flex items-center space-x-4">
    <USkeleton class="h-12 w-12" :ui="{ rounded: 'rounded-full' }" />
    <div class="space-y-2">
      <USkeleton class="h-4 w-[250px]" />
      <USkeleton class="h-4 w-[200px]" />
    </div>
  </div>
</template>

Props

ui
any

{}

Preset

appConfig.ui.skeleton
{
  "base": "animate-pulse",
  "background": "bg-gray-100 dark:bg-gray-800",
  "rounded": "rounded-md"
}

Container

A container lets you center and constrain the width of your content.

Nuxt UI: Fully styled and customizable components for Nuxt

It provides everything related to UI when building your Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts. Built with Headless UI and Tailwind CSS, published under MIT License.