- Button
- Date Picker
- Field
- Fields
- Input Group
- File Uploader
- Signature Pad
- Text Area
- Container
- Section Header
- Separator
- Spacer
- Action Row
- Breadcrumb
- Tabs
- Tabs Container
- Card
- Image
- Text
- Title
- Video Player
- Card Collection
- Data Grid
- List Collection
- Table Collection
- Bar Chart
- Big Number
- Line Chart
- Radial Chart
- Hint
- Progress
- Spinner
- Skeleton
- Toast
- Sheet
- Dialog
- Real-world patterns
- Primitives
Primitives
The shadcn-based building blocks in the registry, and how PEx customises them.
The primitives in registry/ui/ are the low-level building blocks every other
component is composed from. They track shadcn/ui closely, so
their props and behaviour match the upstream docs — what's PEx-specific is the styling.
The curated components documented elsewhere in this section (Forms, Collections, Charts, …) are built on top of these primitives.
How PEx customises primitives
Brand decisions — radius, cursor, colour — live as unlayered data-slot rules in the
design system stylesheet (packages/ui-web/src/styles/globals.css), not in the component
files. This keeps primitives reinstallable via shadcn add without losing the PEx look.
Three semantic radii drive the shapes:
| Token | Applied to | Shape |
|---|---|---|
--radius-control | standalone controls — Button, Input, Select, Badge, Toggle | pill |
--radius-overlay | floating surfaces — Dropdown, Popover, Tooltip, Select content | rounded |
--radius-group | connected controls — ButtonGroup outer corners | slight |
Primitives marked ✦ below carry PEx styling overrides; the rest are stock shadcn. To add or customise one, see Adding a Component.
Installing & importing
# pull the component source into your app via the registry
pnpm dlx shadcn@latest add @pex-ui/button// …or import from the shared package once a component has been promoted
import { Button } from "@pex/ui-web";See Setup for workspace configuration.
Form controls
| Primitive | Description | |
|---|---|---|
| Button | Clickable action with brand variants (primary, fancy, cta, …) | ✦ |
| Button Group | Connected row of buttons sharing a single outline | ✦ |
| Input | Single-line text field | ✦ |
| Input Group | Input with leading/trailing addons | ✦ |
| Input OTP | One-time-code entry | |
| Textarea | Multi-line text field | ✦ |
| Label | Accessible field label | |
| Checkbox | Boolean toggle | ✦ |
| Radio Group | Single choice from a set | ✦ |
| Switch | On/off toggle | ✦ |
| Toggle / Toggle Group | Pressable state buttons | ✦ |
| Select | Dropdown choice | ✦ |
| Slider | Range selection | ✦ |
| Form | React Hook Form + Zod wiring | |
| Calendar / Date Range Picker | Date selection | ✦ |
Layout & containers
| Primitive | Description | |
|---|---|---|
| Card | Bordered content surface | |
| Separator | Divider line | |
| Accordion | Collapsible stacked sections | ✦ |
| Collapsible | Single show/hide region | |
| Aspect Ratio | Constrains child to a ratio | |
| Scroll Area | Styled scroll container | |
| Resizable | Draggable split panels | |
| Sidebar | App navigation shell |
Overlays & menus
| Primitive | Description | |
|---|---|---|
| Dialog | Modal window | ✦ |
| Alert Dialog | Confirmation modal | |
| Sheet | Edge-anchored panel | ✦ |
| Drawer | Mobile bottom sheet | |
| Popover | Floating content on a trigger | ✦ |
| Hover Card | Preview on hover | |
| Tooltip | Hint on hover/focus | ✦ |
| Dropdown Menu | Action menu | ✦ |
| Context Menu | Right-click menu | ✦ |
| Menubar | App-style menu bar | ✦ |
| Command | Command palette / combobox | ✦ |
Navigation
| Primitive | Description | |
|---|---|---|
| Tabs | Switch between panels | ✦ |
| Breadcrumb | Path trail | ✦ |
| Pagination | Page navigation | |
| Navigation Menu | Primary nav with flyouts | ✦ |