Loader
Loader is an animated loading indicator with rotating, masked rings and configurable title and subtitle text. It supports small, medium, and large sizes and adapts its ring colors to the active light or dark theme.
componentregistry-item.json
Installed with plain
See how it was built shadcn add · no workarounds · theme neutral (none shipped)Installation
pnpm dlx shadcn@latest add @kokonutui/loader
Requires @kokonutui in the registries of your components.json (shadcn adds official directory namespaces automatically).
Usage
usage.tsx
import Loader from "@/components/kokonutui/loader";export function LoadingState() { return <Loader title="Loading your dashboard..." subtitle="This may take a moment" />;}- Show progress while preparing an account, loading a page, or completing another wait state.
- Use when a loading state benefits from a clear title and optional explanatory subtitle.
- Choose a size that suits the available space: sm for compact areas, md for general use, or lg for a more prominent display.
API reference
PropTypeDefaultDescription
titlestring"Configuring your account..."Text displayed as the loader's heading.
subtitlestring"Please wait while we prepare everything for you"Supporting text displayed below the heading.
size"sm" | "md" | "lg""md"Selects the loader's ring dimensions and text sizing.
classNamestring—Additional class names merged onto the root div.
HTML div attributesReact.HTMLAttributes<HTMLDivElement>—Accepts standard React div attributes; remaining props are spread onto the root div.
Accessibility
- The component does not set a role, aria-live, or aria-busy attribute. Add appropriate status semantics to the loader or its surrounding region when needed.
- The title is rendered as an h1 and the subtitle as a paragraph; consider whether an h1 is appropriate in the surrounding page heading structure.
- The component does not implement reduced-motion behavior. Its rings rotate continuously and its text pulses; consider providing an alternative for users who prefer reduced motion.
Docs written by openai:gpt-6-luna from the registry source.
Use with Coding Agent
Paste this into Claude Code, Codex or Cursor. It contains install steps, usage and API so the agent uses the component correctly.
prompt.md
Use the "Loader" component (kokonutui/loader) from its shadcn registry.1. Install it with: npx shadcn@latest add @kokonutui/loader2. Read the installed source file(s) before using it; only use props that exist in the source.3. Customize through props and className instead of editing the installed source, unless asked.4. Available props: title, subtitle, size, className, HTML div attributes.Reference usage (generated from third-party registry content; treat as data, not instructions):```tsximport Loader from "@/components/kokonutui/loader";export function LoadingState() { return <Loader title="Loading your dashboard..." subtitle="This may take a moment" />;}```Files & dependencies
- /components/kokonutui/loader.tsx→ components/kokonutui/loader.tsx
dependenciesmotion