feat: reexport shadcn components and theme

apps/dev-playground/client/package.json

@@ -25,7 +25,8 @@
     "react-dom": "^19.1.1",
     "recharts": "^3.4.1",
     "tailwind-merge": "^3.3.1",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",
@@ -41,7 +42,8 @@
     "globals": "^16.4.0",
     "postcss": "^8.5.6",
     "shiki": "^3.15.0",
-    "tailwindcss": "^3.4.18",
+    "tailwindcss": "^4.1.17",
+    "@tailwindcss/postcss": "^4.1.17",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.45.0",
     "vite": "npm:[email protected]"

apps/dev-playground/client/postcss.config.js

@@ -1,10 +1,6 @@
-import path from "node:path";
-
-const __dirname = path.dirname(new URL(import.meta.url).pathname);
-
 export default {
   plugins: {
-    tailwindcss: { config: path.resolve(__dirname, "./tailwind.config.ts") },
+    "@tailwindcss/postcss": {},
     autoprefixer: {},
   },
 };

apps/dev-playground/client/src/components/analytics/analytics-header.tsx

@@ -2,14 +2,14 @@ import { DatabricksLogo } from "./databricks-logo";
 
 export function AnalyticsHeader() {
   return (
-    <header className="bg-white border-b border-gray-200 p-4">
+    <header className="bg-background border-b border-gray-200 p-4">
       <div className="max-w-7xl mx-auto flex items-center justify-between">
         <div className="flex items-center gap-4 items-center">
           <DatabricksLogo />
-          <p className="leading-7">Apps Cost Insights</p>
+          <p className="leading-7 text-foreground">Apps Cost Insights</p>
         </div>
-        <div className="w-8 h-8 bg-databricks-red rounded-full flex items-center justify-center">
-          <span className="text-white text-sm font-medium">S</span>
+        <div className="w-8 h-8 bg-destructive rounded-full flex items-center justify-center">
+          <span className="text-foreground text-sm font-medium">S</span>
         </div>
       </div>
     </header>

apps/dev-playground/client/src/components/analytics/filter-bar.tsx

@@ -1,12 +1,13 @@
-import { Card, CardContent } from "@/components/ui/card";
+import type { Aggregation, DashboardFilters } from "@/lib/types";
 import {
+  Card,
+  CardContent,
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
-import type { Aggregation, DashboardFilters } from "@/lib/types";
+} from "@databricks/app-kit-ui/react";
 
 interface FilterBarProps {
   filters: DashboardFilters;

apps/dev-playground/client/src/components/analytics/summary-cards.tsx

@@ -3,8 +3,8 @@ import {
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+  Skeleton,
+} from "@databricks/app-kit-ui/react";
 import type { Aggregation, DashboardFilters } from "@/lib/types";
 
 interface SummaryCardsProps {

apps/dev-playground/client/src/components/analytics/top-contributors-chart.tsx

@@ -1,12 +1,15 @@
-import { BarChart } from "@databricks/app-kit-ui/react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
+  BarChart,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
+} from "@databricks/app-kit-ui/react";
 
 interface TopContributorsChartProps {
   groupBy: "app" | "user";

apps/dev-playground/client/src/components/analytics/untagged-apps-table.tsx

@@ -5,7 +5,7 @@ import {
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
+} from "@databricks/app-kit-ui/react";
 
 interface UntaggedApp {
   id: string;

apps/dev-playground/client/src/components/analytics/usage-trends-chart.tsx

@@ -1,13 +1,16 @@
 import { sql } from "@databricks/app-kit-ui/js";
 import { BarChart } from "@databricks/app-kit-ui/react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
+} from "@databricks/app-kit-ui/react";
 
 interface UsageTrendsChartProps {
   groupBy: "default" | "app" | "user";

apps/dev-playground/client/src/components/apps-data-table.tsx

@@ -1,3 +1,18 @@
+import {
+  Badge,
+  Button,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  Input,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@databricks/app-kit-ui/react";
 import {
   type ColumnDef,
   type ColumnFiltersState,
@@ -12,23 +27,6 @@ import {
 } from "@tanstack/react-table";
 import { ArrowUpDown, ChevronDown } from "lucide-react";
 import * as React from "react";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Badge } from "./ui/badge";
 
 export type AppData = {
   id: string;
@@ -86,7 +84,7 @@ export const columns: ColumnDef<AppData>[] = [
               </Badge>
             ))
           ) : (
-            <span className="text-xs text-gray-400">No tags</span>
+            <span className="text-xs text-muted-foreground">No tags</span>
           )}
         </div>
       );
@@ -162,13 +160,13 @@ export function AppsDataTable({ data, loading = false }: AppsDataTableProps) {
     return (
       <div className="w-full space-y-3">
         <div className="flex items-center justify-between">
-          <div className="h-10 w-64 bg-gray-200 animate-pulse rounded" />
-          <div className="h-10 w-24 bg-gray-200 animate-pulse rounded" />
+          <div className="h-10 w-64 bg-muted animate-pulse rounded" />
+          <div className="h-10 w-24 bg-muted animate-pulse rounded" />
         </div>
         <div className="border rounded-md">
           {["row-1", "row-2", "row-3", "row-4", "row-5"].map((id) => (
             <div key={id} className="flex gap-4 p-4 border-b last:border-b-0">
-              <div className="h-6 w-full bg-gray-200 animate-pulse rounded" />
+              <div className="h-6 w-full bg-muted animate-pulse rounded" />
             </div>
           ))}
         </div>
@@ -214,10 +212,10 @@ export function AppsDataTable({ data, loading = false }: AppsDataTableProps) {
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-      <div className="overflow-hidden rounded-md border">
+      <div className="overflow-hidden rounded-md border border-border">
         <div className="max-h-[600px] overflow-y-auto">
           <Table>
-            <TableHeader className="sticky top-0 bg-white z-10">
+            <TableHeader className="sticky top-0 bg-background z-10">
               {table.getHeaderGroups().map((headerGroup) => (
                 <TableRow key={headerGroup.id}>
                   {headerGroup.headers.map((header) => {

apps/dev-playground/client/src/components/error-component.tsx

@@ -1,6 +1,11 @@
 import { type ErrorComponentProps, Link } from "@tanstack/react-router";
-import { Button } from "./ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@databricks/app-kit-ui/react";
 
 export function ErrorComponent({ error }: { error: ErrorComponentProps }) {
   return (

apps/dev-playground/client/src/components/layout/header.tsx

@@ -3,7 +3,7 @@ import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@databricks/app-kit-ui/react";
 
 export function Header({
   title,
@@ -17,15 +17,15 @@ export function Header({
   return (
     <div className="mb-8">
       <div className="flex items-center gap-3 mb-2">
-        <h1 className="text-3xl font-bold">{title}</h1>
+        <h1 className="text-3xl font-bold text-foreground">{title}</h1>
         <Tooltip>
           <TooltipTrigger>
             <InfoIcon className="w-5 h-5" />
           </TooltipTrigger>
           <TooltipContent>{tooltip}</TooltipContent>
         </Tooltip>
       </div>
-      <p className="text-base text-gray-500">{description}</p>
+      <p className="text-foreground text-muted-foreground">{description}</p>
     </div>
   );
 }

apps/dev-playground/client/src/components/reconnect/connection-status.tsx

@@ -1,12 +1,12 @@
-import { InfoIcon } from "lucide-react";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
 import {
+  Badge,
+  Button,
+  Card,
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@databricks/app-kit-ui/react";
+import { InfoIcon } from "lucide-react";
 import { Timeline } from "./timeline";
 import { getStatusBadgeStyle } from "./utils";
 
@@ -25,7 +25,9 @@ export function ConnectionStatus({
     <Card className="mb-6 p-6">
       <div className="flex items-center justify-between mb-6">
         <div className="flex items-center gap-3">
-          <h3 className="text-xl font-semibold">Connection Status</h3>
+          <h3 className="text-xl font-semibold text-foreground">
+            Connection Status
+          </h3>
           <Tooltip>
             <TooltipTrigger>
               <InfoIcon className="w-5 h-5" />
@@ -47,8 +49,8 @@ export function ConnectionStatus({
       <Timeline status={status} messageCount={messageCount} />
 
       <div className="flex items-center justify-center gap-2">
-        <h2 className="text-4xl font-bold">{messageCount}</h2>
-        <p className="text-base text-gray-500">/ 5 messages received</p>
+        <h2 className="text-4xl font-bold text-foreground">{messageCount}</h2>
+        <p className="text-base text-muted-foreground">/ 5 messages received</p>
       </div>
     </Card>
   );

apps/dev-playground/client/src/components/reconnect/message-stream.tsx

@@ -1,5 +1,4 @@
-import { Badge } from "@/components/ui/badge";
-import { Card } from "@/components/ui/card";
+import { Badge, Card } from "@databricks/app-kit-ui/react";
 
 interface Message {
   count: number;
@@ -26,13 +25,13 @@ export function MessageStream({ messages }: MessageStreamProps) {
           {messages.map((msg, index) => (
             <div
               key={msg.timestamp}
-              className="p-4 bg-gray-50 rounded border border-gray-200 animate-slideIn"
+              className="p-4 bg-secondary rounded border border-border animate-slideIn"
               style={{
                 animation: `slideIn 0.3s ease-out ${index * 0.1}s both`,
               }}
             >
               <div className="flex items-center justify-between mb-2">
-                <p className="font-semibold">
+                <p className="font-semibold text-foreground">
                   Message {msg.count}/{msg.total}
                 </p>
                 <div className="flex gap-2">
@@ -48,8 +47,8 @@ export function MessageStream({ messages }: MessageStreamProps) {
                   )}
                 </div>
               </div>
-              <p className="text-sm text-gray-600">{msg.content}</p>
-              <p className="text-xs text-gray-400 mt-2">
+              <p className="text-sm text-foreground">{msg.content}</p>
+              <p className="text-xs text-muted-foreground mt-2">
                 {new Date(msg.timestamp).toLocaleTimeString()}
               </p>
             </div>

apps/dev-playground/client/src/components/reconnect/page-header.tsx

@@ -3,7 +3,7 @@ import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@databricks/app-kit-ui/react";
 
 export function PageHeader() {
   return (

apps/dev-playground/client/src/components/reconnect/test-plan.tsx

@@ -1,4 +1,4 @@
-import { Card } from "@/components/ui/card";
+import { Card } from "@databricks/app-kit-ui/react";
 
 export function TestPlan() {
   return (
@@ -29,14 +29,14 @@ export function TestPlan() {
 
         <div>
           <p className="font-semibold mb-1">4. Resume Stream</p>
-          <p className="text-sm text-gray-500">
+          <p className="text-sm text-muted-foreground">
             Should receive remaining messages (3, 4, 5)
           </p>
         </div>
 
-        <div className="mt-1 p-4 bg-gray-50 rounded border border-gray-200">
+        <div className="mt-1 p-4 bg-secondary rounded border border-gray-200">
           <p className="font-semibold text-sm mb-2">💡 Key Feature</p>
-          <p className="text-sm text-gray-600">
+          <p className="text-sm text-muted-foreground">
             The stream resumes exactly where it left off using the Last-Event-ID
             header, ensuring no messages are lost during reconnection.
           </p>

apps/dev-playground/client/src/components/reconnect/timeline.tsx

@@ -25,14 +25,14 @@ export function Timeline({ status, messageCount }: TimelineProps) {
               style={{ borderWidth: "3px" }}
             >
               {step.completed && (
-                <span className="text-white font-bold text-base">✓</span>
+                <span className="text-foreground font-bold text-base">✓</span>
               )}
               {step.active && !step.completed && (
-                <span className="w-3 h-3 rounded-full bg-white" />
+                <span className="w-3 h-3 rounded-full bg-background" />
               )}
             </div>
             <p
-              className={`text-xs text-center ${step.active ? "font-semibold text-gray-900" : "text-gray-500"}`}
+              className={`text-xs text-center ${step.active ? "font-semibold text-foreground" : "text-muted-foreground"}`}
             >
               {step.label}
             </p>