UI Kit

import { Colors } from "@/components/ui/colors"

<Colors />

font-family: Inter, Arial, sans-serif;

[lang="fa"] {
  font-family: "Vazirmatn", Tahoma, sans-serif;
  direction: rtl;
}

/* H1 → H6 */
/* 36/44 · 30/38 · 24/32 · 20/28 · 16/24 · 14/20 */

/* UI body */
font-size: 14px;
line-height: 22px;
font-weight: 400;

<div className="space-y-6 p-6">
  <header className="space-y-2">...</header>
  <div className="grid gap-4">...</div>
</div>

import { Radius } from "@/components/ui/radius"

<Radius />

import { Shadows } from "@/components/ui/shadows"

<Shadows />

import { Search, Database } from "lucide-react"

<Search size={20} strokeWidth={1.75} aria-hidden="true" />

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="/">Workspace</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>Dashboard</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination"

<Pagination>
  <PaginationContent>
    <PaginationItem><PaginationPrevious disabled={page === 1} /></PaginationItem>
    <PaginationItem><PaginationLink isActive>3</PaginationLink></PaginationItem>
    <PaginationItem><PaginationNext disabled={page === pageCount} /></PaginationItem>
  </PaginationContent>
</Pagination>

import { DataMindLogo } from "@/components/ui/datamind-logo"

// Header
<DataMindLogo size="sm" />

// Sidebar
<DataMindLogo size="md" />

// Collapsed navigation
<DataMindLogo compact size="md" />

import { Button } from "@/components/ui/button"

<Button variant="default">Generate</Button>
<Button variant="outline">Cancel</Button>

import { Input } from "@/components/ui/input"

<Input type="text" placeholder="Dataset name" />

import { Select } from "@/components/ui/select"

<Select />

import { Checkbox } from "@/components/ui/checkbox"

<Checkbox id="archived" />
<Label htmlFor="archived">Include archived data</Label>

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

<RadioGroup defaultValue="automatic">
  <RadioGroupItem value="automatic" />
  <RadioGroupItem value="manual" />
</RadioGroup>

import { Switch } from "@/components/ui/switch"

<Switch aria-label="Enable query validation" />

import { Modal } from "@/components/ui/modal"

<Modal />

import { Tabs } from "@/components/ui/tabs"

<Tabs />

import { Badge } from "@/components/ui/badge"

<Badge>Verified</Badge>
<Badge variant="secondary">Draft</Badge>
<Badge variant="destructive">Failed</Badge>

import { Tooltip } from "@/components/ui/tooltip"

<Tooltip />

<Alert variant="destructive">
  <CircleAlert />
  <AlertTitle>Query failed</AlertTitle>
  <AlertDescription>Review the SQL and retry.</AlertDescription>
</Alert>

import { toast } from "sonner"

toast.success("Query completed")
toast.error("Query failed")

import { LoaderCircle } from "lucide-react"

<LoaderCircle className="size-4 animate-spin" role="status" />

import { Skeleton } from "@/components/ui/skeleton"

<Skeleton className="h-4 w-[240px]" />

<Progress value={64} aria-label="Upload progress" />

<Button disabled>
  <LoaderCircle className="size-4 animate-spin" />
  Generating
</Button>

import { MetricCard } from "@/components/ui/metric-card"

<MetricCard />

import { DataTable } from "@/components/ui/data-table"

<DataTable />

import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"

<ChartContainer config={chartConfig}>
  <BarChart data={data}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="month" tickLine={false} axisLine={false} />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Bar dataKey="revenue" fill="var(--color-revenue)" radius={4} />
  </BarChart>
</ChartContainer>

import { Filters } from "@/components/ui/filters"

<Filters />

import { QueryResult } from "@/components/ui/query-result"

<QueryResult />

import { MessageComposer } from "@/components/ui/message-composer"

<MessageComposer onSubmit={sendMessage} />

import { AIPrompt } from "@/components/ui/ai-prompt"

<AIPrompt />

import { AIResponse } from "@/components/ui/ai-response"

<AIResponse />

import { AIThinking } from "@/components/ui/ai-thinking"

<AIThinking />

import { Clarification } from "@/components/ui/clarification"

<Clarification />

import { SQLPreview } from "@/components/ui/sql-preview"

<SQLPreview />

import { Confidence } from "@/components/ui/confidence"

<Confidence />

import { AIError } from "@/components/ui/ai-error"

<AIError />

import { QueryFlow } from "@/components/ui/query-flow"

<QueryFlow />

import { DashboardCreation } from "@/components/ui/dashboard-creation"

<DashboardCreation />

import { SQLValidation } from "@/components/ui/sql-validation"

<SQLValidation />

import { ErrorHandling } from "@/components/ui/error-handling"

<ErrorHandling />