Components — Modern React UI Library

Examples

Default Spinner

Renders a circular spinner with role=status and aria-live=polite for screen readers.

Default

import { Spinner } from "@g4rcez/components";

function DefaultSpinner() {
  return <Spinner />;
}

Custom Size

Override size via className using Tailwind size utilities.

Custom sizes

import { Spinner } from "@g4rcez/components";

function CustomSizes() {
  return (
    <div className="flex items-center gap-8">
      <Spinner className="size-6" />
      <Spinner className="size-10" />
      <Spinner className="size-16" />
    </div>
  );
}

Loading Component

Loading centers a Spinner inside a full-height flex container, ideal for page or section loading states.

import { Loading } from "@g4rcez/components";

function LoadingDemo() {
  return (
    <div className="h-40 border border-card-border rounded-lg">
      <Loading />
    </div>
  );
}

When to use Spinner

Use when

You need the documented Spinner interaction or presentation in a product workflow.

Avoid when

A native HTML element already provides the Spinner behavior you need.

Accessibility

Keep the Spinner labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

Keep keyboard focus visible and follow the documented key commands.
Provide an accessible name and connect descriptions or errors to the control.