Components

QuickDapp includes a small set of UI components built on Radix UI primitives with TailwindCSS styling. The focus is on essential functionality rather than a comprehensive design system.

Base Components

Button provides variants (default, outline, ghost, error), sizes, and loading state. It uses the cn() utility for class merging and forwards refs properly.

Dialog wraps Radix UI's dialog primitive with consistent styling—dark background, blur overlay, and close button. The DialogContent, DialogHeader, DialogTitle, and DialogDescription components compose together for modal interfaces.

Form components in Form.tsx include Input, Textarea, Label, and FormField. Input and Textarea display validation errors below the field. Label supports a required indicator. These integrate with the custom useForm hook for validation.

Toast provides temporary notification messages. The ToastProvider manages a list of toasts with auto-dismiss. Toast types include default, success, error, and warning with corresponding colors and icons.

Layout

The application uses a simple layout with a fixed header and main content area. The Header component shows the logo and notification indicator (when authenticated).

There's no sidebar—the application focuses on the main content area. Routing uses React Router with a single page currently (HomePage).

┌─────────────────────────────────────┐
│ Header (fixed, 56px)                │
├─────────────────────────────────────┤
│                                     │
│ Main Content                        │
│                                     │
├─────────────────────────────────────┤
│ Footer                              │
└─────────────────────────────────────┘

Notification Components

Real-time notification display:

• NotificationsIndicator — Bell icon in header with unread count badge
• NotificationsDialog — Full list of notifications with mark-as-read functionality
• NotificationComponents — Individual renderers for different notification types

Utility Components

Loading shows a spinning indicator for async operations.

ErrorBoundary catches component errors and displays a fallback UI instead of crashing the application.

ErrorMessageBox displays styled error messages.

Popover wraps Radix UI's popover for dropdown content.

Tooltip wraps Radix UI's tooltip for hover hints.

ThemeSwitcher provides a popover with system/light/dark theme options. See Theming for details.

OnceVisibleInViewport renders children only when the component scrolls into view, useful for lazy loading.

CookieConsentBanner displays a GDPR-compliant cookie consent banner when needed.

Styling Approach

Components use TailwindCSS with the cn() utility. This combines clsx for conditional classes and tailwind-merge for deduplication:

import { cn } from "../utils/cn"

<div className={cn(
  "base-styles",
  isActive && "active-styles",
  className
)} />

The theme is defined in globals.css using Tailwind v4's @theme directive. See Theming for details on colors and custom utilities.