Reference Guides

Quick reference documentation for components, APIs, and integrations.

📋 In This Section

Components Guide

Complete reference for all UI components, patterns, and styling utilities.

Topics covered:

Shared Components:

• Navbar (global navigation)

• Footer (site footer)

UI Components (shadcn/ui):

• Button (variants, sizes)

• Card (parts and composition)

Custom Utilities:

• Glass card effect

• Text gradients

• Floating animation

• Shooting stars

Icons:

• Lucide React integration

• Common icons reference

• Sizing conventions

Layout Components:

• Container patterns

• Grid layouts (bento, stats)

Form Components:

• Input fields

• Button styles

Dashboard Components:

• Stat cards

• Transaction rows

• Virtual cards

Responsive Design:

• Breakpoints

• Mobile-first patterns

• Hide/show utilities

Best Practices:

• Spacing consistency

• Color usage

• Typography scale

• Hover states

• Accessibility

Level: Beginner to Intermediate Time to complete: ~40 minutes

---

API Reference

Complete API documentation with examples for backend integrations.

Topics covered:

Authentication:

• POST /auth/signup - User registration

• POST /auth/login - User authentication

User Accounts:

• GET /users/me - Current user profile

• GET /users/me/balance - Account balances

Transactions:

• GET /transactions - List transactions (with pagination)

• GET /transactions/:id - Get transaction details

Virtual Cards:

• GET /cards - List cards

• POST /cards - Create virtual card

• PUT /cards/:id - Update card

• DELETE /cards/:id - Deactivate card

Authorization Policies:

• GET /policies - List policies

• POST /policies - Create policy

Analytics:

• GET /analytics/spending - Spending analytics

Webhooks:

• POST /webhooks - Register webhook

• Webhook payload examples

Error Handling:

• Error response format

• Error codes reference

Rate Limiting:

• Limits and headers

• Burst capacity

SDKs:

• JavaScript/TypeScript SDK

• Python SDK

Level: Intermediate Prerequisites: Basic REST API knowledge Time to complete: ~50 minutes

---

🎯 Quick Navigation

For Frontend Developers

Start with Components Guide to understand all available UI components and styling patterns.

For Backend Developers

Jump to API Reference for complete endpoint documentation and integration examples.

For Full-Stack Developers

Review both documents to understand the complete system.

---

📖 Common Use Cases

Building a New Page

1. Review Components Guide for available components

2. Check layout patterns and responsive design

3. Use color and typography guidelines

Integrating with Backend

1. Read API Reference authentication section

2. Find relevant endpoints for your feature

3. Review error handling patterns

4. Implement rate limiting

Creating Custom Components

1. Study existing patterns in Components Guide

2. Follow component template

3. Maintain design system consistency

4. Add accessibility features

---

🔍 Quick Reference Tables

Breakpoints

Name	Min Width	Usage
sm	640px	Small tablets
md	768px	Tablets
lg	1024px	Desktops
xl	1280px	Large screens
2xl	1536px	Extra large

Color Palette

Color	Value	Usage
Primary	#6366f1	CTAs, links
Success	#10b981	Positive actions
Background	#030303	Page background
Text	#ffffff	Primary text

Icon Sizes

Class	Size	Usage
w-4 h-4	16px	Small icons
w-5 h-5	20px	Regular icons
w-6 h-6	24px	Large icons

API Status Codes

Code	Meaning
200	Success
201	Created
400	Bad request
401	Unauthorized
404	Not found
429	Rate limited
500	Server error

---

🆘 Need Help?

• Component questions: [email protected]

• API integration: [email protected]

• General support: [email protected]

• Discord: #frontend

---

← Technical Docs | Main Documentation | Operations →