Using @prepared/ui-* packages and the design system.
UI package hierarchy:
- @prepared911/ui-core - Foundational primitives (Button, Input, Modal, Box)
- Specialized packages - Domain-specific features (data tables, charts, calendars)
- Custom components - Only when design system doesn't cover it
Before implementing:
- Search the component library for existing components
- Check Storybook for component APIs and examples
- Review the design system for available icons and patterns
Foundational primitives and general-purpose components:
List filter bars, SortControl, and headless sort/group hooks:
See the Filters design docs. Prefer this package over the temporary Filter re-export from @prepared911/ui-data-table (CORE-555).
@prepared911/ui-data-table
Advanced tables with sorting, filtering, pagination:
Pattern: Column definitions in dedicated hook:
@prepared911/ui-visualization-charts
Chart.js-based components for analytics:
Sidebars and side panels:
Date pickers and calendars:
@prepared911/ui-audio-player
Media playback:
Always check existing components before implementing new UI:
- Search component library - Check
@prepared911/ui-core and specialized packages
- Review Storybook - See component examples and API documentation
- Check design tokens - Use CSS custom properties (
--spacing-*, --color-*)
- Find icons - Check
SVGAsset enum in @prepared911/ui-core
Available in @prepared911/ui-core:
- Layout:
Box, FlexBox
- Interactive:
Button, Input, Checkbox, Radio, Select
- Feedback:
Modal, Tooltip, Alert, Spinner
- Display:
Icon, Badge, Avatar, Card
Composable Icons (Preferred)
Use only when:
- Icon specific to single component (not reused)
- Requires custom styling not supported by composable icons
- Part of larger illustration
Use disabled prop instead of conditional wrapper:
Tooltips on Disabled Elements
Tooltips work on disabled buttons without any wrapper—Radix Tooltip uses pointer events, which are not blocked by disabled:
When to Use Specialized Packages
Use @prepared911/ui-data-table when:
- ✅ Displaying tabular data with sorting
- ✅ Need filtering and pagination
- ✅ Complex column configurations
- ✅ Row selection and bulk actions
Use @prepared911/ui-visualization-charts when:
- ✅ Displaying analytics and metrics
- ✅ Line charts, bar charts, pie charts
- ✅ Time-series data visualization
Use @prepared911/ui-core when:
- ✅ Simple lists or cards (not complex tables)
- ✅ Foundational UI (buttons, inputs, modals)
- ✅ Layout primitives (Box, FlexBox)
Design Tokens with Box Props
Box props automatically use design tokens:
Styling Decision Flowchart
Example: Complete Feature
For more detailed technical guidance, see these reference files:
