CLAUDE.md

1# Components Directory
2 
3## Folder Structure
4 
5Each component in its own PascalCase folder:
6 
7```
8ComponentName/
9├── ComponentName.tsx    # Main implementation
10├── ComponentName.test.tsx  # Tests (optional)
11└── index.ts            # Barrel export
12```
13 
14## Barrel Export
15 
16```ts
17import ComponentName from "./ComponentName";
18export default ComponentName;
19```
20 
21## Props Interface
22 
23```tsx
24interface iComponentNameProps {
25  requiredProp: string;
26  optionalProp?: number;
27}
28 
29const ComponentName: FC<iComponentNameProps> = ({ requiredProp, optionalProp = 0 }) => {
30  // ...
31};
32 
33ComponentName.displayName = "ComponentName";
34 
35export default ComponentName;
36```
37 
38## displayName Requirement
39 
40Always set `displayName` for debugging:
41 
42```tsx
43ComponentName.displayName = "ComponentName";
44```
45 
46## ShadCN Components
47 
48Located in `lib/shadcn/ui/`. **DO NOT MODIFY** - create wrappers instead.
49 
50See `.claude/rules/react.md` for full React patterns.
51