Reference this guide when working on UI components.
Many commonly-used form components can be seen at /components. Always use these patterns when possible.
We use Radix UI components. To match our design, we create custom wrappers in /src/components/RadixUI.
Import pattern: Use Radix prefix for imports, then wrap with simple names:
import { Tabs as RadixTabs } from "radix-ui"
// Use as:
<Tabs />This allows simple naming conventions like <Tabs />, <Dialog />, etc.
Custom components (outside Radix scope) use the OS prefix:
| Component | Location |
|---|---|
<OSButton /> |
/src/components/OSButton |
<OSFieldset /> |
/src/components/OSFieldset |
<OSIcons /> |
/src/components/OSIcons |
<OSTable /> |
/src/components/OSTable |
<OSTabs /> |
/src/components/OSTabs |
- Radix wrapper needed →
/src/components/RadixUI - Custom component needed →
/src/components/OS[Name]