@ninna-ui/feedback

9 feedback exports for Ninna-UI — alerts, toasts, loading states, progress indicators, skeletons, and more.

📖 Full Documentation →  |  📦 npm →  |  🐙 GitHub →

User feedback components for Ninna UI — everything you need to communicate state, progress, and notifications to users. All components are accessible, themeable, and support data-slot CSS targeting.

Installation

pnpm add @ninna-ui/feedback @ninna-ui/core

CSS Setup

@import "tailwindcss";
@import "@ninna-ui/core/theme/presets/default.css";

@variant dark (&:is(.dark *));

Components

| Component | Description | Variants | Colors | |-----------|-------------|----------|--------| | Alert | Contextual feedback messages with optional dismiss | solid, soft, outline | 8 | | Toast / Toaster | Ephemeral notifications with promise support | solid, soft, outline | 8 | | Loading | Spinner loading indicator | — | 8 | | Progress | Linear progress bar with optional label | solid, soft | 8 | | CircularProgress | Circular/radial progress indicator | — | 8 | | Status | Dot indicator for online/offline/busy states | — | 8 | | Skeleton | Content placeholder during loading | — | — | | EmptyState | Placeholder for empty data states | — | — |

Skeleton also exports SkeletonCircle and SkeletonText for common placeholder shapes.

Quick Start

import { Alert, Toaster, toast, Loading, Progress } from "@ninna-ui/feedback";

function App() {
  return (
    <>
      <Alert color="success" variant="soft">
        Changes saved successfully!
      </Alert>

      <Progress value={65} color="primary" />

      <Loading size="lg" color="primary" />

      <button onClick={() => toast({ title: "Saved!", variant: "success" })}>
        Save
      </button>

      <Toaster />
    </>
  );
}

All Exports

import {
  Alert, type AlertProps,
  Toast, Toaster, ToastProvider, toast, useToast,
  type ToastProps, type ToasterProps, type ToastData,
  Loading, type LoadingProps,
  Progress, type ProgressProps,
  CircularProgress, type CircularProgressProps,
  Status, type StatusProps,
  Skeleton, SkeletonCircle, SkeletonText,
  type SkeletonProps, type SkeletonCircleProps, type SkeletonTextProps,
  EmptyState, type EmptyStateProps,
} from "@ninna-ui/feedback";

Related Packages

• @ninna-ui/core — Design tokens and theme presets (required)
• @ninna-ui/primitives — Base components (Button, Badge, Text)
• @ninna-ui/overlays — Overlay components (Modal, Drawer, Tooltip)
• All packages — Complete package list

License

MIT