Blocks

Pre-built, production-ready UI blocks that combine multiple Rayden UI components into common patterns. Blocks are designed to be dropped into your application with minimal configuration.

Import


import {
  NotificationsBlock,
  LoginBlock,
  TableBlock,
  QuickSendBlock,
  RecentTransactionsBlock,
  EmptyStateBlock,
  SearchableTableBlock,
} from "@raydenui/ui/blocks";

Or import individually:


import { LoginBlock } from "@raydenui/ui/blocks";

Available Blocks

Block	Description
NotificationsBlock	Notification list with read/unread states
LoginBlock	Authentication form with social providers
TableBlock	Data table with header and pagination
QuickSendBlock	Quick money transfer interface
RecentTransactionsBlock	Transaction history list
EmptyStateBlock	Empty state with illustration and CTA
SearchableTableBlock	Table with search and filters

Quick Examples

NotificationsBlock

Notifications

3 unread

David left a comment on Site redesign

Mar 21, 2024

10 mins

Sarah shared a file with you

Mar 20, 2024

2 hours

Mike mentioned you in Project Alpha

Mar 19, 2024

1 day

LoginBlock

Log In

Enter your credentials to access your account

Are you new here?

EmptyStateBlock

No tasks to show

You don't have any pending tasks for today. Add new tasks to track productivity

Customization

Blocks accept a className prop for custom styling:


<TableBlock
  className="rounded-xl shadow-soft-lg"
  title="Users"
  columns={...}
  rows={...}
/>

For deeper customization, consider using the individual components directly from @raydenui/ui.