Components

import { Button } from "@/design-system";

<Button variant="primary" size="md">Start session</Button>

import { IconButton } from "@/design-system";

<IconButton label="Notifications" dot><IconBell size={20} /></IconButton>

import { Chip } from "@/design-system";

<Chip selected={on} onClick={toggle}>Yoga</Chip>

import { Badge } from "@/design-system";

<Badge variant="plus">Plus</Badge>

import { Avatar } from "@/design-system";

<Avatar name="Amina Yasmin" size="lg" ring />

import { Card } from "@/design-system";

<Card variant="glass" padding="md">…</Card>

import { Input } from "@/design-system";

<Input label="Email" placeholder="you@example.com" error="…" />

import { SearchBar } from "@/design-system";

<SearchBar value={q} onValueChange={setQ} placeholder="Search coaches" />

import { Tabs } from "@/design-system";

<Tabs items={items} value={tab} onValueChange={setTab} />

import { SegmentedControl } from "@/design-system";

<SegmentedControl label="Mode" options={…} value={v} onValueChange={setV} />

import { Toggle } from "@/design-system";

<Toggle label="Reminders" showLabel checked={on} onCheckedChange={setOn} />

import { ProgressBar } from "@/design-system";

<ProgressBar label="Course progress" value={64} />

import { ProgressRing } from "@/design-system";

<ProgressRing label="Session timer" value={7} max={10}>07:00</ProgressRing>

import { Stepper } from "@/design-system";

<Stepper current={1} steps={[{label:"Details"},{label:"Payment"},{label:"Done"}]} />

import { Divider } from "@/design-system";

<Divider />

import { RatingStars } from "@/design-system";

<RatingStars value={4} onValueChange={setRating} />

import { Text } from "@/design-system";

<Text variant="h2">Are you ready to grow?</Text>

import { PointsPill } from "@/design-system";

<PointsPill value={50} kind="points" />

import { AppHeader } from "@/design-system";

<AppHeader user={{name:"Abdullah"}} levelTitle="Hi Beginner" xp={389} points={50} streak={7} hasNotifications />

import { BottomNav } from "@/design-system";

<BottomNav items={items} activeKey="home" linkAs={Link} />

import { SideMenu } from "@/design-system";

<SideMenu items={items} activeKey="home" header={…} />

import { CreateButton } from "@/design-system";

<CreateButton>Create</CreateButton>

import { OfflineBanner } from "@/design-system";

<OfflineBanner onRetry={retry} />

import { ViewAsBanner } from "@/design-system";

<ViewAsBanner viewingAs="Noura (Member)" onExit={exit} />

import { Dialog } from "@/design-system";

<Dialog open title="Cancel booking?" actions={…} onClose={close} />

import { BottomSheet } from "@/design-system";

<BottomSheet open title="Session options" onClose={close}>…</BottomSheet>

import { FilterSheet } from "@/design-system";

<FilterSheet open groups={groups} value={v} onValueChange={setV} onApply={apply} onReset={reset} />

import { ShareSheet } from "@/design-system";

<ShareSheet open onShare={share} onClose={close} />

import { ReportSheet } from "@/design-system";

<ReportSheet open targetName="@noura" onAction={act} onClose={close} />

import { AdminActionsSheet } from "@/design-system";

<AdminActionsSheet open actions={actions} onSelect={run} onClose={close} />

import { Toast } from "@/design-system";

<Toast tone="success" title="Booking confirmed" onDismiss={dismiss} />

import { CelebrationModal } from "@/design-system";

<CelebrationModal open kind="xp" amount={120} title="Streak unlocked!" />

import { PriceTiles } from "@/design-system";

<PriceTiles tiles={tiles} value={opt} onValueChange={setOpt} />

import { StatusChip } from "@/design-system";

<StatusChip status="confirmed" />

import { Countdown } from "@/design-system";

<Countdown to={retreatStart} />

import { DayGrid } from "@/design-system";

<DayGrid days={states} onSelect={openDay} />

import { CalendarPicker } from "@/design-system";

<CalendarPicker value={date} onValueChange={setDate} locale="ar-SA" />

import { TimeSlotPicker } from "@/design-system";

<TimeSlotPicker slots={slots} value={slot} onValueChange={setSlot} />

import { QRTicket } from "@/design-system";

<QRTicket code="ETZ-7F3K-2026" title="Desert Retreat" details={…} />

import { ConfirmationCard } from "@/design-system";

<ConfirmationCard title="You're booked!" summary={…} actions={…} />

import { ContentCard } from "@/design-system";

<ContentCard contentType="audio" access="plus" locked title="…" />

import { CourseCard } from "@/design-system";

<CourseCard title="21-Day Anxiety Relief" rating={4.9} price={50} coach={<CoachChip name="Amina Yasmin" />} />

import { CoachChip } from "@/design-system";

<CoachChip name="Amina Yasmin" />

import { SectionHeader } from "@/design-system";

<SectionHeader title="Recommended For You" action={<Button variant="ghost" size="sm">See all</Button>} />

import { GreetingHeader } from "@/design-system";

<GreetingHeader greeting="Good Morning!" name="Hey Abdullah!" prompt="Are you ready to grow?" />

import { StreakTracker } from "@/design-system";

<StreakTracker title="7 Day Streak" remaining="2 days to go" days={[…]} />

import { ReviewCard } from "@/design-system";

<ReviewCard author="Noura" rating={5} date="2 days ago" body="…" />

import { RoleBadge } from "@/design-system";

<RoleBadge role="coach" />

import { SafetyCard } from "@/design-system";

<SafetyCard title="Need to talk now?" tone="urgent">…</SafetyCard>

import { EmptyState } from "@/design-system";

<EmptyState title="No bookings yet" action={…} />

import { ErrorState } from "@/design-system";

<ErrorState title="Couldn't load" onRetry={retry} />

import { LockedState } from "@/design-system";

<LockedState title="Plus members only" action={…} />

import { NoAccess } from "@/design-system";

<NoAccess title="You don't have access" />

import { Skeleton } from "@/design-system";

<SkeletonCard />  <Skeleton width="60%" />

import { Mascot } from "@/design-system";

<Mascot mood="happy" message="Great job!" />

import { BarChart } from "@/design-system";

<BarChart title="Minutes practised" data={[{label:"Sun",value:12},…]} />

import { LineChart } from "@/design-system";

<LineChart title="Mood trend" data={…} />

import { CalendarHeatmap } from "@/design-system";

<CalendarHeatmap title="Practice days" values={levels} />

import { Logo } from "@/design-system";

<Logo variant="logotype-03" width={160} />

import { RewardBadge } from "@/design-system";

<RewardBadge size={96} />