feat: use library components (#4099)

## Changes
<!-- Brief summary of your changes that is easy to understand -->

Remove all shadcn components and consume them from
`@databricks/appkit-ui/react`

This [PR](databricks/appkit#2) would need to be
merged first.

## Why
<!-- Why are these changes needed? Provide the context that the reviewer
might be missing.
For example, were there any decisions behind the change that are not
reflected in the code itself? -->

We reexport all the components from the library and provide a base
theming, allowing users to easily customize the theme by simply changing
the colors in the `index.css` file

## Tests
<!-- How have you tested the changes? -->

<!-- If your PR needs to be included in the release notes for next
release,
add a separate entry in NEXT_CHANGELOG.md as part of your PR. -->

Co-authored-by: MarioCadenas <[email protected]>

Author: MarioCadenas

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": {