---
title: Frontend
description: File naming and styling rules for apps/web and packages/deft.
---

## Files

| File            | Name                                                   |
| --------------- | ------------------------------------------------------ |
| React component | `PascalCase`: `TracePage.tsx`                          |
| Anything else   | `camelCase`, matching its export: `useOrganization.ts` |
| Directory       | `kebab-case`: `components/copy-button/`                |

Suffixes stay as they are: `.test.ts`, `.server.ts`, `.isomorph.ts`. Routes in `apps/web/src/routes/` follow TanStack Start's names instead.

No JSDoc on components or their props.

## Classes

`local/split-tailwind-classes` enforces this and `bun run check:fix` applies it.

- Simple classes share one string. A class with a variant (`hover:`, `md:`, `data-*:`, `[&…]:`) or an arbitrary value gets its own string.
- Pass `cn` strings as arguments, simple string first and `className` last. `tv` uses arrays with the same grouping.
- A plain `className` string is fine only while every class is simple; otherwise use `cn`.
- Compose with `cn`, never template literals. Group a conditional block in a nested `cn`.

```tsx
cn("relative flex items-center gap-2", "hover:bg-control-hover", "[&_svg]:size-4", className);
```