Spinner
Installation
npx shadcn@latest add https://uibrik.com/r/spinner.jsonInstall the packages
npm install motionAdd the cn helper
Imports
cnfrom@/lib/utils, whichshadcn initcreates. Add it by hand without shadcn.Copy the source into your project
components/uibrik/spinner/spinner.tsx"use client"; // One family of loading indicators. Every variant is drawn on the same 24-unit // grid with the same stroke, inherits the text colour and runs at the same // tempo, so a ring in a button and dots in a chat bubble look like they belong // together. With reduced motion they run at half speed: still moving, so the // wait stays visible, but calmer. import { motion, useReducedMotion } from "motion/react"; import { cn } from "@/lib/utils"; export type SpinnerVariant = "ring" | "radial" | "dots" | "bars" | "orbit"; export type SpinnerProps = { variant?: SpinnerVariant; /** Width and height in px. */ size?: number; /** Stroke width on the 24-unit grid; scales with size. */ thickness?: number; /** Multiplies the tempo; 2 is twice as fast. */ speed?: number; /** Read out to screen readers. */ label?: string; className?: string;
Adds the files to
components/uibrik/spinner and installs motion. With the @uibrik namespace set up: npx shadcn@latest add @uibrik/spinner.Props
Spinner- size
- Type number
- 24
- Width and height.
- thickness
- Type number
- 2
- Stroke width on the 24-unit grid; scales with size.
- speed
- Type number
- 1
- Tempo multiplier.
- variant
- Type "ring" | "radial" | "dots" | "bars" | "orbit"
- "ring"
- Which indicator. All share size, stroke and tempo.
- label
- Type string
- "Loading"
- Read out to screen readers.
- className
- Type string
- –
- Classes for the wrapper. Colour comes from the text colour.
