Auth Debug

Site Mode: full
useAuth:
- Loading: true
- Authenticated: false
- User ID: null
useAuthCheck:
- Loading: true
- Authenticated: false
- User ID: null
- Error: none

Welcome to Novibes

Sign in to access your dashboard and manage your OAuth connections

Sign In

Card Components

Various card styles with theme colors

Secure by Default
Row-level security and encrypted token storage
OAuth 2.0
Industry-standard authentication protocols
Multi-Provider
GitHub, Spotify, Google, Discord, and more
Developer Ready
Monorepo structure with shared components
Primary Card
Card with primary background color

This card uses the primary theme color as its background.

Secondary Card
Card with secondary background color

This card uses the secondary theme color as its background.

Accent Card
Card with accent background color

This card uses the accent theme color as its background.

Buttons & Badges

Interactive elements with theme colors

Button Variants
Badge Variants
DefaultSecondaryOutlineDestructivePrimaryAccent

Form Controls

Input elements and interactive controls

Text Inputs
Switches & Sliders

Dashboard Components

Stats cards and data visualization

Total Users
2,543

+12% from last month

Active Sessions
1,234

+8% from last month

OAuth Tokens
5,678

+23% from last month

Providers
12

3 new this month

Lists & Grids

Organized content layouts

Activity List

User logged in

2 min ago

New notification

5 min ago

Email verified

10 min ago

Security alert

15 min ago

Login failed

20 min ago

User Grid
A

Alice

Online

B

Bob

Online

C

Charlie

Online

D

Diana

Online

E

Eve

Online

F

Frank

Online

Tabs & Navigation

Tabbed content organization

Overview Dashboard

View your account overview, recent activity, and quick stats. The primary color highlights important elements.

156

Total Items

89

Active

67

Pending

Typography

Text styles and hierarchy

Heading 1 - Primary Color

Heading 2 - Secondary Color

Heading 3 - Accent Color

Heading 4 - Default

Body text with muted foreground color. This is the standard paragraph text used throughout the application.

Small text for captions and secondary information.

Primary colored text

Secondary colored text

Accent colored text

Muted foreground text

Destructive colored text

Ready to Get Started?

Try switching between different color themes using the palette icon in the header to see how all these components adapt.