For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
43
Sponsor

Spinner

PreviousNext

An indicator that can be used to show a loading state.

import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";

export function SpinnerDemo() {
  return (
    <div style={{ alignItems: "center", display: "flex", gap: 16 }}>

Installation

$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.com/r/spinner.json

Usage

import { Spinner } from "@/components/ui/spinner/spinner";
<Spinner />

Examples

Size

import { Spinner } from "@/components/ui/spinner";

export function SpinnerSize() {
  return (
    <div className="flex items-center gap-6">
      <Spinner className="size-3" />

Button

import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";

export function SpinnerButton() {
  return (
    <div className="flex flex-col items-center gap-4">

Badge

SyncingUpdatingProcessing
import { Badge } from "@/components/ui/badge";
import { Spinner } from "@/components/ui/spinner";

export function SpinnerBadge() {
  return (
    <div className="flex items-center gap-4">

Empty

Processing your request

Please wait while we process your request. Do not refresh the page.

import { Button } from "@/components/ui/button";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,

Input Group

Validating...
import { ArrowUpIcon } from "lucide-react";

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,

RTL

To enable right-to-left support, see the RTL guide.

"use client";

import { useTranslation } from "@/components/language-selector";
import type { Translations } from "@/components/language-selector";
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";