Introduction
The Catalyst UI Library is a comprehensive collection of Vue3 components designed to provide a consistent, accessible, and customizable UI experience across different Catalyst applications. Built using Vue3's composition API, these components offer a modern approach to building robust user interfaces.
Overview
Catalyst UI Library was originally developed for OTD (Online Task Description) but has since been decoupled to become a standalone library. This separation enables:
- Consistent Design: Maintain visual and behavioral consistency across multiple applications
- Rapid Development: Accelerate development with pre-built, tested components
- Seamless Updates: Apply design and functionality updates across all applications simultaneously
Component Catalog
The library includes components organized into the following categories:
Component Types
- Layout Components: Accordion, Collapse, Modal, Tabs
- Form Controls: Input, Checkbox, Radio, Select, Date picker, Search
- Interactive Elements: Button, Dropdown, Switch, Tooltip
- Data Display: Table, Status Label, Badge, Progress, Spinner
- Navigation: Anchor Menu, Tab Switch
- Structure: File Tree, Masonry
The components are built with Vue3 and provide:
- Standard props for customization
- Event handling for interactive elements
- Slot-based content insertion
- Documentation with usage examples
Browse the complete catalog in the components section for documentation and examples.
Supporting Styles and Utilities
The library includes supporting style resources:
- Typography: Text styling variables and classes
- Colors: Color variables used throughout the component library
- Icons: Icon set available through the CataUiIcon component
- Utility Classes: Helper classes for common styling needs
These resources are used by the components internally and can be leveraged in your application for consistency.
Getting Started
To start using the Catalyst UI Library in your Vue3 project, check out the Getting Started guide.