Feedback & Loading

Alerts, toasts, spinners, and loading state components.

Components for user feedback, notifications, and loading states.

Alert

Alert message for important information.

import { Alert, AlertTitle, AlertDescription } from '@kit/ui/alert';

<Alert>
  <AlertTitle>Information</AlertTitle>
  <AlertDescription>
    This is an informational alert message.
  </AlertDescription>
</Alert>
<Alert variant="destructive">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>
    Something went wrong. Please try again.
  </AlertDescription>
</Alert>

With Icon

import { TriangleAlert, CheckCircle } from 'lucide-react';
<Alert variant="destructive">
  <TriangleAlert className="h-4 w-4" />
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>Operation failed.</AlertDescription>
</Alert>
<Alert>
  <CheckCircle className="h-4 w-4" />
  <AlertTitle>Success</AlertTitle>
  <AlertDescription>Operation completed.</AlertDescription>
</Alert>

Toast (Sonner)

Toast notifications using Sonner.

import { toast } from '@kit/ui/sonner';

// Simple toasts
toast.success('Operation successful');
toast.error('Something went wrong');
toast.info('New message received');
toast.warning('Please review your input');
// With description
toast.success('Saved', {
  description: 'Your changes have been saved.',
});
// Promise-based toast
await toast.promise(saveData(), {
  loading: 'Saving...',
  success: 'Data saved!',
  error: 'Failed to save',
});

Toaster Setup

Add to your root layout:

import { Toaster } from '@kit/ui/sonner';
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  );
}

Spinner

Loading spinner animation.

import { Spinner } from '@kit/ui/spinner';

<Spinner />
<Spinner className="h-8 w-8" />
<Spinner className="h-4 w-4 text-primary" />

In Button

<Button disabled={isPending}>
  {isPending ? (
    <>
      <Spinner className="mr-2 h-4 w-4" />
      Loading...
    </>
  ) : (
    'Submit'
  )}
</Button>

Progress

Progress bar indicator.

import { Progress } from '@kit/ui/progress';

<Progress value={33} />
<Progress value={66} />
<Progress value={100} />

Loading Overlay

Semi-transparent overlay with spinner.

import { LoadingOverlay } from '@kit/ui/loading-overlay';

<div className="relative">
  <Content />
  {isLoading && <LoadingOverlay />}
</div>

Global Loader

Full-page loading state.

import { GlobalLoader } from '@kit/ui/global-loader';

<GlobalLoader />
{/* With options */}
<GlobalLoader
  displayLogo
  fullPage
  displaySpinner
  displayTopLoadingBar
/>

Top Loading Bar Indicator

Page load progress bar at top of screen.

import { TopLoadingBarIndicator } from '@kit/ui/top-loading-bar-indicator';

{isLoading && <TopLoadingBarIndicator />}

Hover tooltip for additional information.

import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@kit/ui/tooltip';

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline" size="icon">
        <HelpCircle className="h-4 w-4" />
      </Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Helpful information here</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Next: Utilities →