Components

Loading

A compact loading indicator with a spinner and accessible label text.

Install

Add this registry item to your app with shadcn.

bash

bunx --bun shadcn@latest add https://krakstack.net/r/loading.json

Overview

Loading renders a small spinner next to localized loading text. Use it inside pending pages, empty table states, cards, and inline loading regions. It defaults to the inline variant. Pass variant="centered" for route-level pending states and label to override the built-in English and French default.

Usage

tsx

import { Loading } from "@/components/ui/loading";

<Loading />
<Loading variant="centered" />
<Loading label="Refreshing records..." />

Dependencies

Packages and shadcn components required by this registry item.

Dependencies

lucide-react

Preview

A reusable spinner and label for pending pages, tables, and inline regions.

Inline loading state

Refreshing records...