shadcn/ui Playground

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'
import './styles.css'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

import { useState } from 'react'
import { InfoIcon } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Switch } from '@/components/ui/switch'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'

export default function App() {
  const [email, setEmail] = useState('')
  const [plan, setPlan] = useState('starter')
  const [teamWorkspace, setTeamWorkspace] = useState(true)

  return (
    <TooltipProvider>
      <main className="flex min-h-screen items-center justify-center bg-muted/40 p-6">
        <Card className="w-full max-w-md shadow-xl shadow-black/5">
          <CardHeader>
            <div className="flex items-center justify-between gap-3">
              <div className="flex size-10 items-center justify-center rounded-lg bg-primary text-primary-foreground">
                ui
              </div>
              <Badge variant="secondary">20 components ready</Badge>
            </div>
            <CardTitle className="pt-2">Create your workspace</CardTitle>
            <CardDescription>
              A real shadcn starter with editable component source.
            </CardDescription>
          </CardHeader>

          <CardContent className="space-y-5">
            <div className="space-y-2">
              <Label htmlFor="email">Work email</Label>
              <Input
                id="email"
                type="email"
                value={email}
                placeholder="[email protected]"
                onChange={(event) => setEmail(event.currentTarget.value)}
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="plan">Plan</Label>
              <Select value={plan} onValueChange={setPlan}>
                <SelectTrigger id="plan" className="w-full">
                  <SelectValue placeholder="Choose a plan" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="starter">Starter</SelectItem>
                  <SelectItem value="pro">Pro</SelectItem>
                  <SelectItem value="enterprise">Enterprise</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="flex items-center justify-between rounded-lg border p-3">
              <div className="space-y-1">
                <Label htmlFor="team-workspace">Team workspace</Label>
                <p className="text-sm text-muted-foreground">
                  Let teammates join this project.
                </p>
              </div>
              <Switch
                id="team-workspace"
                checked={teamWorkspace}
                onCheckedChange={setTeamWorkspace}
              />
            </div>
          </CardContent>

          <CardFooter className="justify-end gap-2">
            <Tooltip>
              <TooltipTrigger asChild>
                <Button variant="outline" size="icon" aria-label="About this starter">
                  <InfoIcon />
                </Button>
              </TooltipTrigger>
              <TooltipContent>Every component is editable.</TooltipContent>
            </Tooltip>

            <Dialog>
              <DialogTrigger asChild>
                <Button>Create workspace</Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>Workspace ready</DialogTitle>
                  <DialogDescription>
                    {email || 'Your account'} is using the {plan} plan.
                  </DialogDescription>
                </DialogHeader>
                <div className="rounded-lg bg-muted p-4 text-sm">
                  Team access is {teamWorkspace ? 'enabled' : 'disabled'}.
                </div>
                <DialogFooter showCloseButton />
              </DialogContent>
            </Dialog>
          </CardFooter>
        </Card>
      </main>
    </TooltipProvider>
  )
}