React Components

Interactive documentation with live demos for all @ludiks/react components

Global Theme Customization

Customize the color scheme for all components. Changes apply to all demos in real-time.

Primary Color

Secondary Color

Success Color

UserProfile Component

Display comprehensive user information with progress, achievements, and streaks.

Live Demo

Configuration

Show Circuits

Show Rewards

Show Streak

Variant

Code Example

import { UserProfile } from '@ludiks/react';

<UserProfile 
  userId="user123"
  showCircuits={true}
  showRewards={true}
  showStreak={true}
  variant="card"
  colors={{
    primary: "#8b5cf6",
    secondary: "#06d6a0",
    success: "#10b981"
  }}
/>

Installation & Setup

npm install @ludiks/react

This package combines the full Ludiks SDK with ready-to-use React components. If you only need SDK functionality without visual components, you can use @ludiks/sdk instead.