npx shadcn-ui@latest init

npx shadcn-ui@latest add button
npx shadcn-ui@latest add card  
npx shadcn-ui@latest add dialog

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

export function App() {
  return <Button variant="outline">Click me</Button>
}

// It's YOUR component now
// components/ui/button.tsx
export function Button({ className, variant, size, ...props }) {
  // Customize anything you want
  // Add your business logic
  // No library constraints
}

/* globals.css */
:root {
  --primary: 224 71% 40%;
  --radius: 0.5rem;
}

.dark {
  --primary: 224 71% 70%;
}

// Combine primitives into custom components
export function StatCard({ title, value, change }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="text-2xl font-bold">{value}</div>
        <Badge variant={change > 0 ? "success" : "destructive"}>
          {change}%
        </Badge>
      </CardContent>
    </Card>
  )
}

<CommandDialog open={open} onOpenChange={setOpen}>
  <CommandInput placeholder="Search..." />
  <CommandList>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search Emoji</CommandItem>
    </CommandGroup>
  </CommandList>
</CommandDialog>

const form = useForm<FormData>({
  resolver: zodResolver(formSchema),
})

<Form {...form}>
  <FormField
    control={form.control}
    name="email"
    render={({ field }) => (
      <FormItem>
        <FormLabel>Email</FormLabel>
        <FormControl>
          <Input {...field} />
        </FormControl>
        <FormMessage />
      </FormItem>
    )}
  />
</Form>

// components/index.ts
export * from './ui/button'
export * from './ui/card'
export * from './ui/dialog'

// components/custom/submit-button.tsx
import { Button } from '@/components/ui/button'

export function SubmitButton({ loading, ...props }) {
  return (
    <Button disabled={loading} {...props}>
      {loading ? <Spinner /> : props.children}
    </Button>
  )
}

<Button disabled={isLoading}>
  {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
  Submit
</Button>

// Use Sheet on mobile, Dialog on desktop
const Component = isMobile ? Sheet : Dialog