Component Library

componEnts

40+ React components built with Radix Primitives, styled with Tailwind + CVA. Every component consumes Alchemy design tokens and forwards refs. This page is a comprehensive interactive catalog of every component exported from @kazam-au/ui.

01 Primitives02 Form Inputs03 Cards & Surfaces04 Feedback05 Overlays06 Navigation07 Dashboard Metrics08 Dashboard Data09 Date Selection10 Marketing
01

primitivEs

Foundational UI atoms: buttons, badges, avatars, and separators. Every variant, size, and state.

Import.tsx
import { Button, Badge, Avatar, Separator } from '@kazam-au/ui'

Button -- Variants

Button -- Sizes

Button -- Loading & Disabled

Badge -- All Variants x 2 Sizes

SuccessWarningErrorInfoOrangeBlue42
SuccessWarningErrorInfoOrangeBlue7

Avatar -- Image / Initials / Fallback at sm / md / lg

Separator -- Horizontal & Vertical

Section ASection BSection C
02

form inputS

Complete form system: inputs, textareas, selects, checkboxes, radios, switches, labels, and composite form fields with validation.

Import.tsx
import {
  Input, Textarea, Select, SelectContent, SelectItem,
  SelectTrigger, SelectValue, Checkbox, RadioGroup,
  RadioGroupItem, Switch, Label, FormField
} from '@kazam-au/ui'

Input -- Types

Input -- Validation States

Textarea -- Auto-resize & Character Count

0/200

Select -- Standard & Searchable

Checkbox / Radio / Switch

Checkbox

Radio Group

Switch

Label

FormField -- Label + Description + Error Composition

The conversion event identifier

Expected server-side match rate

03

cards & surfacEs

Composable card system with header/body/footer slots, plus alert banners for system feedback.

Import.tsx
import {
  Card, CardHeader, CardBody, CardFooter,
  Alert, AlertTitle, AlertDescription
} from '@kazam-au/ui'

Card -- Default & Outlined with Header / Body / Footer

Tracking Health

Active

All conversion events firing correctly. Server-side CAPI delivering 98% match rate across Meta and Google.

Signal Coverage

Partial

3 of 5 platforms connected. TikTok and LinkedIn pending CAPI integration. Estimated 15% signal gap.

Data Quality Score

Score: 87

Attribution accuracy improved 34% since server-side implementation. 1,247 conversions tracked this period.

Alert -- All 4 Variants with Title + Description

04

feedbAck

Visual feedback components: toast notifications, progress indicators, and skeleton loading states.

Import.tsx
import { Progress, Skeleton } from '@kazam-au/ui'
// Toast: import { toast, useToast, ToastProvider } from '@kazam-au/ui'

Toast -- Static Previews (4 Variants)

Toasts are triggered via the toast() function. Static previews shown below.

Tracking verified

All conversion events matched server-side. 98% accuracy.

Pipeline failed

CRM sync error at 14:32 UTC. Check webhook configuration.

New platform connected

TikTok Ads is now sending server-side events via CAPI.

Token refresh needed

Meta access token expires in 24 hours. Action required.

Progress -- 25% / 50% / 75% / 100%

Setup progress25%
Data coverage50%
Tracking health75%
Signal strength100%

Skeleton -- Rectangle / Circle / Text Shapes

Rectangle

Circle

Text Lines

Card Skeleton (composite)

05

overlAys

Modal dialogs, tooltips, and dropdown menus. Built on Radix Primitives with full keyboard and focus management.

Import.tsx
import {
  Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter,
  DialogTitle, DialogDescription,
  Tooltip, TooltipProvider, TooltipTrigger, TooltipContent,
  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
  DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator
} from '@kazam-au/ui'

Dialog -- Interactive Demo

Tooltip -- Positioning

Dropdown Menu -- Interactive Demo

06

navigation

Top bar, tabs, and accordion components for structuring content hierarchy and navigation patterns.

Import.tsx
import {
  TopBar, TopBarLogo, TopBarNav, TopBarLink, TopBarActions,
  Tabs, TabsList, TabsTrigger, TabsContent,
  Accordion, AccordionItem, AccordionTrigger, AccordionContent
} from '@kazam-au/ui'

TopBar -- Full Width with Logo / Links / CTA

Kazam

Tabs -- 3-tab with Content

Dashboard Overview

All tracking metrics across connected platforms. Server-side event coverage at 96.2%, with 1,247 conversions attributed this period. ROAS improved 34% since Kazam implementation.

Accordion -- 3 Items (first expanded)

Server-side tracking (CAPI) sends conversion events directly from your server to advertising platforms, bypassing browser restrictions. This recovers 30-40% of signals lost due to ad blockers, ITP, and cookie deprecation. Kazam implements this across all major platforms including Meta, Google, and TikTok.

07

dAshboard -- metrics

KPI cards with sparklines and stats grids for at-a-glance metric dashboards.

Import.tsx
import { KpiCard, StatsGrid } from '@kazam-au/ui'

KpiCard -- With Sparkline, Trend, and Icon

Total Conversions
1,247
+12.3% vs last period
Match Rate
96.2%
+8.4% from baseline
CPA
$18.40
-$4.20 vs pre-Kazam
ROAS
4.2x
+1.8x improvement

StatsGrid -- 2 Column Layout

Events Processed
48,392
+2,140 today
Active Platforms
5
All connected

KpiCard -- Minimal (no sparkline)

Pixel Events
12,841
+340
Server Events
11,907
+298
Deduplicated
934
-12 vs yesterday
08

dashboArd -- data

Data table with sortable columns, pagination, and row selection. Built on TanStack Table with Kazam tracking data.

Import.tsx
import { DataTable, DataTableColumnHeader, DataTablePagination } from '@kazam-au/ui'
import type { ColumnDef } from '@kazam-au/ui'

DataTable -- Sortable Columns with Pagination

Meta AdsPurchase48797.2%Active
Google AdsLead31294.8%Active
TikTok AdsAdd to Cart19891.3%Active
Meta AdsBegin Checkout15696.5%Active
Google AdsPurchase9493.1%Degraded
Rows per page
Page 1 of 1

DataTable -- With Row Selection

Meta AdsPurchase48797.2%Active
Google AdsLead31294.8%Active
TikTok AdsAdd to Cart19891.3%Active
Meta AdsBegin Checkout15696.5%Active
Google AdsPurchase9493.1%Degraded
0 of 5 row(s) selected
Rows per page
Page 1 of 1
09

daShboard -- date selection

Date pickers, date range pickers with preset ranges, and sidebar navigation for dashboard layouts.

Import.tsx
import {
  DatePicker, DateRangePicker,
  SidebarNav, SidebarNavSection, SidebarNavItem
} from '@kazam-au/ui'

DatePicker & DateRangePicker

DatePicker -- Disabled

SidebarNav -- Dashboard Navigation

Dashboard content area

10

marketing

Pre-built marketing page sections: hero banners, CTA blocks, and feature grids for landing pages and product marketing.

Import.tsx
import { Hero, CtaBlock, FeatureGrid, FeatureGridItem } from '@kazam-au/ui'

Hero -- Left-aligned with CTA

Server-Side Tracking

Your Ad Platforms Are Flying Blind

Most advertisers are missing 30-40% of their conversion signals. Kazam finds the gaps, fixes the pipes, and gives your platforms the data they need to optimise properly.

Hero -- Centered Layout

Kazam Tracking Infrastructure

Tracking Becomes Visible

Done-for-you server-side tracking that recovers lost conversions, improves match rates, and makes your ad spend measurably smarter.

CtaBlock -- Call-to-Action Section

Ready to See What You're Missing?

Book a free 15-minute tracking audit. We'll show you exactly where your conversion signals are leaking.

FeatureGrid -- 3 Items with Pixel Icons

Signal Recovery

Recover 30-40% of conversion signals lost to ad blockers, ITP, and cookie deprecation through server-side event delivery.

Match Rate Boost

First-party data enrichment pushes platform match rates from 40-60% to 90-98%, giving algorithms the signal density they need.

Future-Proof Setup

Server-side infrastructure that doesn't break when browsers change. No more scrambling after every Chrome or Safari update.