npx create-next-app@latest my-project
cd my-project
npm install tailwindcss @tailwindcss/postcss postcss

npx shadcn-ui@latest init

npx shadcn-ui@latest add button

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

export default function Example() {
  return <Button>Click Me</Button>;
}

/* globals.css */
@theme {
  --color-primary: #4A90E2;
  --color-muted: #A0A0A0;
  --font-heading: 'Manrope', sans-serif;
  --font-body: 'Merriweather', serif;
}

<div class="text-primary font-heading">
  Welcome to the UI system
</div>

// components/shared/PrimaryButton.jsx
import { Button } from "@/components/ui/button";

export const PrimaryButton = ({ children, ...props }) => (
  <Button variant="default" className="rounded-xl px-6" {...props}>
    {children}
  </Button>
);