Back to landing

Components

24+ production-ready components. Install, import, ship.

Blocks

Pre-built Rayden blocks composed from primitives — drop in complete flows like login, notifications, tables, and dashboards.

  • LoginBlock — Auth layout with social providers
  • NotificationsBlock — Notification feed with actions
  • TableBlock — Data table with sorting & filters
  • SearchableTableBlock — Table + integrated search
  • QuickSendBlock — Quick payments / transfer surface
  • RecentTransactionsBlock — Transaction history list
  • EmptyStateBlock — Empty state with illustration & CTA
import { LoginBlock, NotificationsBlock } from "@raydenui/ui"
Login block playground
Notifications block playground
Quick start
npm install @raydenui/ui
import "@raydenui/ui/styles.css"
AI Compatibility Layer
@raydenui/ai — Machine-readable manifests, design tokens, composition rules, and layout recipes for LLM code generation.
npm install @raydenui/ai
Manifests
import { getManifest } from
  "@raydenui/ai/manifests"

// Full component schema
getManifest("Button")
Tokens
import { tokens } from
  "@raydenui/ai/tokens"

// Colors, spacing, typography
tokens.colors.primary["500"]
Recipes
import { getAllRecipes } from
  "@raydenui/ai/recipes"

// Pre-built layout patterns
getAllRecipes()
Rules
import { validateComponentUsage } 
from "@raydenui/ai/rules"

// Validate component nesting
validateNesting("Table", "TableRow")