feat: use library components

experimental/apps-mcp/templates/appkit/template/{{.project_name}}/CLAUDE.md

@@ -38,7 +38,7 @@ export const querySchemas = {
 
 ```typescript
 // client/src/App.tsx
-import { BarChart } from '@databricks/app-kit-ui/react';
+import { BarChart } from '@databricks/appkit-ui/react';
 
 <BarChart queryKey="my_data" parameters={{}} />
 ```
@@ -73,7 +73,7 @@ See the databricks experimental apps-mcp tools validate instead of running these
 **IMPORTANT**: Read the relevant docs below before implementing features. They contain critical information about common pitfalls (e.g., SQL numeric type handling, schema definitions, Radix UI constraints).
 
 - [SQL Queries](docs/sql-queries.md) - query files, schemas, type handling, parameterization
-- [App Kit SDK](docs/app-kit-sdk.md) - TypeScript imports, server setup, useAnalyticsQuery hook
+- [App Kit SDK](docs/appkit-sdk.md) - TypeScript imports, server setup, useAnalyticsQuery hook
 - [Frontend](docs/frontend.md) - visualization components, styling, layout, Radix constraints
 - [tRPC](docs/trpc.md) - custom endpoints for non-SQL operations (mutations, Databricks APIs)
 - [Testing](docs/testing.md) - vitest unit tests, Playwright smoke/E2E tests

experimental/apps-mcp/templates/appkit/template/{{.project_name}}/client/src/App.tsx

@@ -1,10 +1,22 @@
-import { useAnalyticsQuery, AreaChart, LineChart, RadarChart } from '@databricks/app-kit-ui/react';
-import { sql } from "@databricks/app-kit-ui/js";
+import {
+  useAnalyticsQuery,
+  AreaChart,
+  LineChart,
+  RadarChart,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Skeleton,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@databricks/appkit-ui/react';
+import { sql } from "@databricks/appkit-ui/js";
 import { Line, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Skeleton } from '@/components/ui/skeleton';
-import { Label } from '@/components/ui/label';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { trpc } from './lib/trpc';
 import { useState, useEffect } from 'react';
 
@@ -98,8 +110,8 @@ function App() {
             {health && (
               <div className="space-y-2">
                 <div className="flex items-center gap-2">
-                  <div className="w-2 h-2 rounded-full bg-[hsl(var(--success))] animate-pulse"></div>
-                  <div className="text-lg font-semibold text-[hsl(var(--success))]">{health.status.toUpperCase()}</div>
+                  <div className="w-2 h-2 rounded-full bg-success animate-pulse"></div>
+                  <div className="text-lg font-semibold text-success">{health.status.toUpperCase()}</div>
                 </div>
                 <div className="text-sm text-muted-foreground">
                   Last checked: {new Date(health.timestamp).toLocaleString()}

experimental/apps-mcp/templates/appkit/template/{{.project_name}}/client/src/ErrorBoundary.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import type { ReactNode } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardContent, CardHeader, CardTitle } from '@databricks/appkit-ui/react';
 
 interface Props {
   children: ReactNode;

experimental/apps-mcp/templates/appkit/template/{{.project_name}}/client/src/appKitTypes.d.ts

@@ -1,7 +1,7 @@
 // Auto-generated by AppKit - DO NOT EDIT
-import "@databricks/app-kit-ui/react";
+import "@databricks/appkit-ui/react";
 
-declare module "@databricks/app-kit-ui/react" {
+declare module "@databricks/appkit-ui/react" {
   interface PluginRegistry {
     "analytics": {
       "/users/me/query/:query_key": {