Component Playbook

Typography

Consistent text styles across the application

Headings

Page titles and section headers

Heading 1

text-4xl font-bold

Heading 2

text-3xl font-bold

Heading 3

text-2xl font-semibold

Heading 4

text-xl font-semibold
Heading 5
text-lg font-semibold
Heading 6
text-base font-medium
Body Text

Paragraph and content styles

Large body text

text-lg

Default body text

text-base

Small text

text-sm

Extra small text

text-xs
Font Weights

Available weight variants

Light weight

font-light

Normal weight

font-normal

Medium weight

font-medium

Semibold weight

font-semibold

Bold weight

font-bold

Colors & Semantic

Semantic color usage for text and backgrounds

Text Colors

Semantic color tokens

Primary foreground

text-foreground

Muted foreground

text-muted-foreground

Primary accent

text-primary

Destructive / Error

text-destructive

Success

text-green-500

Warning

text-amber-500
Status Indicators

Consistent status color patterns

Success

bg-green-500/10 border-green-500/30

Warning

bg-amber-500/10 border-amber-500/30

Error

bg-destructive/10 border-destructive/30

Info / Primary

bg-primary/10 border-primary/30

Buttons

Glass variant for CTAs, plus existing variants

Default Variant GLASS

Primary CTA with glassmorphism

All Variants

Complete button library

default
secondary
outline
ghost
link
destructive
Button Sizes

sm, default, lg, icon

Cards

Glassmorphism card styles

Standard

Default card

bg-card
Glass

Semi-transparent

bg-card/50 backdrop-blur-xl
Light Glass

More transparency

bg-card/30 backdrop-blur-md

Stat Card

Dashboard statistics with color variants and gradients

Color Variants COMPONENT

Import from $lib/components/admin

Primary
1,234
Blue
567
Purple
89
Green
42
Yellow
15
Orange
7
Red
3
Accent
99
With Subtitle

Additional context text

Total Users
1,234
Active this month
API Keys
89
12 expiring soon
Loading State

Skeleton while fetching data

Loading...
Ready
Done

Badges

Status indicators and labels

Badge Variants

All available badge styles

Default Secondary Outline Destructive
Success Warning Info

DateTimePicker

Calendar with 24h time selection

Empty State

No date selected

Value: (empty)

With Value

Pre-populated

05/06/2026, 21:30:21

Disabled

Non-interactive

PillToggle

Compact pill-style toggle for switching between views or modes.

Demo

Import from $lib/components/ui/pill-toggle

size="sm" (default)

size="md"

Active: option1

TimeRangePopover

Popover for selecting quick date ranges or a custom date/time range.

Demo

Import from $lib/components/ui/time-range-popover

Last 30 days

Pulse Indicator

Smooth pulsing animation for real-time status

PulseIndicator COMPONENT

Import from $lib/components/ui/pulse-indicator

Sizes

xs
sm
md
lg

Color Variants

green
primary
blue
yellow
red

With Label

Live Connected Pending
Usage Examples

In context

Monitor Status Live

Last updated 14:32

<PulseIndicator variant="green" size="xs" label="Live" />

Use in headers, status bars, real-time dashboards, and notification badges.

Loading Card

Generic loading state with spinner

Usage COMPONENT

Import from $lib/components/ui/loading-card

Loading organization...
<LoadingCard />

Use for full-page loading states or while fetching data.

Access Denied Card

Error state for unauthorized access

Usage COMPONENT

Import from $lib/components/ui/access-denied-card

Access Denied

You do not have access to this organization.

<AccessDeniedCard />

Use when user doesn't have permission to view a resource.

Status Indicator

Display boolean status with colored icon and text

Usage COMPONENT

Import from $lib/components/ui/status-indicator

Email Verified
Email Not Verified
<StatusIndicator
  status={true}
  activeLabel="Email Verified"
  inactiveLabel="Email Not Verified"
/>
Props

Available properties

Prop
Type
Default
status boolean | undefined -
activeLabel string -
inactiveLabel string -
activeColor string 'text-green-500'
inactiveColor string 'text-red-500'
Custom Colors

Override default colors

Account Active
Feature Disabled

Use cases: Email verified/not verified, Account active/disabled, Feature enabled/disabled

Info Field

Read-only info display box with icon and label

Usage COMPONENT

Import from $lib/components/ui/info-field

Email Address

[email protected]

Username

johndoe

Role

Administrator

Account Status

Active

<InfoField
  label="Email Address"
  value="[email protected]"
  icon={Mail}
/>
Props

Available properties

Prop
Type
Default
label string -
value string -
icon Component -
class string ''
Use Cases

When to use InfoField

Profile information display

Settings pages with read-only fields

Detail views showing entity information

Any page requiring structured info display with icons

Section Header

Consistent section title with icon

Usage COMPONENT

Import from $lib/components/ui/section-header

Personal Information

Name

John Doe

Email

[email protected]

Security Settings

Two-Factor Authentication Enabled
<SectionHeader
  title="Personal Information"
  icon={User}
/>
Props

Available properties

Prop
Type
Default
title string -
icon Component -
class string ''
Use Cases

When to use SectionHeader

Profile page sections (Personal Info, Security, Preferences)

Settings pages with multiple grouped sections

Any page with multiple content groups requiring visual separation

Forms with multiple logical sections

Code Block with Copy

Code display with animated copy button

Usage COMPONENT

Import from $lib/components/ui/code-block-with-copy

Basic Usage

Installation 
npm install @eventify/sdk

Multi-line Code

POST /events 
curl -X POST https://api.eventify.dev/events \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"event": "user.signup", "data": {"userId": "123"}}'
<CodeBlockWithCopy
  headerText="POST /events"
  code="curl -X POST ..."
/>
Props

Available properties

Prop
Type
Default
code string -
headerText string -
errorMessage string 'Failed to copy...'
class string ''
Features

Component behavior

Animated icon transition (Copy to Check) on click

Icon resets after 2 seconds

Toast notification only shown on copy failure

Horizontal scroll for long code lines

Monospace font with proper text wrapping

Use Cases

When to use CodeBlockWithCopy

API examples (cURL commands, SDK snippets)

Configuration snippets (JSON, YAML)

Terminal commands (install, setup instructions)

Keys/tokens that users need to copy

Empty State

Centered card for when no data is available

Standard Empty State PREFERRED

Use MonitorEmptyState component or this pattern

No Items Found

There are no items to display. Create one to get started.

Error Variant

Destructive icon color

Not Found

The resource you're looking for doesn't exist.

Compact Variant

For inline/smaller spaces

No events found

Create your first channel to start receiving events.

Severity Color Reference

Standard colors for status/severity indicators

OK
bg-green-500
WARNING
bg-amber-500
CRITICAL
bg-red-500
NO DATA
bg-gray-400

List Items

Preferred patterns for rows and list items

Minimal Row PREFERRED

For DataTable rows, config panels, dense lists

Production API

Main production channel

Active

Staging Environment

Pre-production testing

Paused
Standard Row OVERVIEWS

For main list pages, dashboards

Production API

Main production channel

Active Jan 15
Draggable Row

With hover-reveal drag handle

Production API

Staging Environment

Collapsible Group

Nested/grouped items

Backend Services

3 channels

API Gateway

Auth Service

DataTable

Server-side paginated tables with sorting and filtering

DataTable Row Pattern STANDARD

Use this styling for all DataTable row snippets

Demo Channels

Showing 0 results

No results found

Try adjusting your search or filters

Form Patterns

Labels, inputs, hints, and validation

Form Labels

Standard label patterns

We'll never share your email.

Password is required.

Empty States

When no data is available

No events found

Create your first channel to start receiving events.

Auth Card

Login/registration card example

TST
eventify

Real-time monitoring and event tracking

Don't have an account? Sign up

PageHeader

Standardized page header with title, description, and optional action buttons.

Variants

With and without action slot

My Channels

Manage your personal channels for organizing events

Users

Manage and monitor all users on the platform

PasswordInput

Password field with show/hide toggle, accessibility, and disabled state.

States

Enabled and disabled

RevokeApiKeyAlertDialog

Confirmation dialog for revoking API keys.

Demo

Click to trigger the revoke confirmation

ConfirmDialog

Generic confirmation dialog with destructive variant.

Demo

Click to trigger the delete confirmation

WatchlistTableRow

Reusable table row for watchlist items with actions.

Demo

Two sample rows with monitor, edit, and delete actions

Production Monitor
Monitors all production channels for dow...
Created: Jan 15, 2026
Staging Health
Tracks staging environment health metric...
Created: Mar 20, 2026

ErrorAlert

Destructive alert for displaying errors with optional retry action.

Without Retry

Simple error message display

With Retry

Error message with retry button

InitialsAvatar

Circular avatar displaying user initials in three sizes.

Sizes

sm, md, lg variants

JD
sm
JD
md
JD
lg

HttpMethodBadge

Color-coded badge for HTTP methods.

All Methods

GET, POST, PUT, PATCH, DELETE

GET POST PUT PATCH DELETE

HttpStatusBadge

Color-coded badge for HTTP status codes.

Status Ranges

2xx=green, 4xx=yellow, 5xx=red

200 404 500

This page is only visible in development mode

Toggle light/dark mode to verify consistency