Shared UI Primitive Checklist

Shared UI Primitive Checklist

Add a shared UI primitive only if the component is generic, low-level, and safe to reuse across unrelated features.

It belongs in src/shared/ui/ when all are true

• it has a generic UI name such as Button, Card, Dialog, Tabs, Input
• it does not encode one feature’s language or business rules
• it can be reused without importing feature types or feature helpers
• it is safe to use across different pages and domains
• it depends only on shared utilities, generic props, and UI libraries

It stays feature-owned when any are true

• the name is business-specific such as PeopleTable or PublicationFilters
• it assumes a feature DTO, mutation, or query shape
• it embeds feature copy, feature policy, or feature navigation
• it would need a feature import to work correctly

Starter shape

import * as React from "react";
import { cn } from "@/shared/utils/cn";

function {Primitive}({ className, ...props }: React.ComponentProps<"div">) {
  return <div className={cn("rounded-md border", className)} {...props} />;
}

export { {Primitive} };

Rules

• use generic naming from 13-naming-conventions.md
• do not import from src/features/
• do not import Cloudflare runtime or server-only code
• keep props generic; avoid feature DTO props if a compositional API works