How do I show a toast notification?

Add to your root layout, then call toast({ title: "Saved!", status: "success" }) from any component. The Toaster handles stacking, auto-dismiss, and animations.

Do skeletons cause layout shift?

No. Skeletons are designed to match the dimensions of the content they replace. Use the same height/width classes as the real content to prevent CLS (Cumulative Layout Shift).

Components

React Feedback Components

Alerts, toasts, progress bars, skeletons, and empty states — give users clear feedback with accessible, Tailwind-styled components.

import { Alert, Toast, Progress, Skeleton, EmptyState } from "@ninna-ui/feedback";

<Alert status="success" title="Saved!" description="Your changes are now live." />

<Progress value={75} />

<Skeleton className="h-4 w-64" />

<EmptyState title="No results" description="Try a different search term" />

Key features

Alert: inline feedback with status icons (success, warning, error, info)

Toast: ephemeral notifications with auto-dismiss and stacking

Progress: determinate and indeterminate modes

Skeleton: loading placeholders that match content layout

EmptyState: friendly empty states with CTAs

Loading: spinner with configurable size

Complete feedback toolkit

Every app needs to communicate state: success, loading, error, and empty. Ninna UI's @ninna-ui/feedback package covers all four with accessible, consistently styled components.

Toasts use a Toaster provider — add <Toaster /> once in your root layout, then call toast() from anywhere in your app.

Component Docs

Alert Toast Progress Skeleton EmptyState