---

trigger: glob globs: *.tsx

Shadcn UI Rules

<author>blefnk/rules</author> <version>1.0.0</version>

Context

• For integrating Shadcn UI primitives
• Maintains consistency and design standards

Requirements

• Import Shadcn primitives from $/lib/primitives.
• Keep app-specific components in $/lib/components.
• Match Shadcn design and naming conventions.
• Style <Link> using cn() and buttonVariants when you need a button-like style.
• Use <Button> only when you need to call a function.

Available Shadcn UI Component Primitives

Accordion, Alert, Alert Dialog, Aspect Ratio, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Carousel, Chart, Checkbox, Collapsible, Combobox, Command, Context Menu, Data Table, Date Picker, Dialog, Drawer, Dropdown Menu, Form, Hover Card, Input, Input OTP, Label, Menubar, Navigation Menu, Pagination, Popover, Progress, Radio Group, Resizable, Scroll Area, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Sonner, Switch, Table, Tabs, Textarea, Toast, Toggle, Toggle Group, Tooltip

Examples

<example> import { Button } from "~/ui/primitives/button";

export function ConfirmButton() { return <Button>Confirm</Button>; } </example>

<example type="invalid"> import { Button } from "shadcn-ui";

export function ConfirmButton() { return <Button>Confirm</Button>; } </example>

<example>

import { Link } from "next/link";
import { cn } from "~/lib/utils";
import { buttonVariants } from "~/ui/primitives/button";

export function HomeLink() {
  return (
    <Link
      href="/"
      className={cn(
        buttonVariants({
          variant: "default",
          className: "mx-auto mt-4 w-fit",
        })
      )}
    >
      Home
    </Link>
  );
}

</example> <example type="invalid">

import { Link } from "next/link";
import { Button } from "~/ui/primitives/button";

export function HomeLink() {
  return (
    <Button
      className="mx-auto mt-4 w-fit"
    >
      <Link href="/">Home</Link>
    </Button>
  );
}

</example>