| 45 | 45 | | - Never hand-copy an icon's SVG paths into a file. If Lucide lacks the |
| 46 | 46 | | icon you need, pick the closest one that it has. |
| 47 | 47 | | |
| 48 | + | ## Interface components |
| 49 | + | |
| 50 | + | - **Build the site from the components in `apps/web/app/components/ui`**, |
| 51 | + | which are [shadcn/ui](https://ui.shadcn.com) components themed with |
| 52 | + | g1t's tokens: buttons, cards, badges, tables, tabs, separators, |
| 53 | + | breadcrumbs, menus, dialogs, sheets, tooltips, form controls. |
| 54 | + | - **If shadcn has a component you need and `ui` doesn't, add it there** |
| 55 | + | first, themed with the tokens, then use it. Don't rebuild it inline. |
| 56 | + | - **Change how something looks through the component's variants**, not |
| 57 | + | with a one-off class string at the call site. A long `className` on a |
| 58 | + | `div` that draws a card, a pill or a button is a component that should |
| 59 | + | exist. |
| 60 | + | - Hover hints use the `Tooltip` component, never `title=`. Native |
| 61 | + | `<select>`, file inputs, checkboxes and radios use their `ui` |
| 62 | + | components. |
| 63 | + | - Look at every page you change, in light and dark, on a desktop and a |
| 64 | + | phone, before calling it done. |
| 65 | + | |
| 48 | 66 | | ## Before you push |
| 49 | 67 | | |
| 50 | 68 | | - `cargo test` in the crate or service you changed. |
