UI Component Library
Relevant source files
The following files were used as context for generating this wiki page:
- src/components/ui/sheet.tsx
- src/components/ui/tabs.tsx
- package.json
- src/components/Header.tsx
- src/components/CVSSCalculator.tsx
- src/components/CVSSVersionsTabs.tsx
- src/components/ScoreHistory.tsx
- src/components/FAQAccordion.tsx
- src/components/comparison-dialog.tsx
- src/components/cvss-calculator/ScoreCard.tsx
The Quant UI Component Library is a collection of reusable React components that form the foundation of the application's user interface. It is built upon a modern stack leveraging Radix UI for accessibility and behavior, and Tailwind CSS for styling. This approach provides a flexible and consistent system for building complex user interfaces like the CVSS calculators and score management features.
The library consists of both low-level UI primitives (e.g., Button, Card, Dialog) and higher-level composite components that combine these primitives to create specific features (e.g., Header, ScoreHistory). The components are designed to be composable and are styled directly with utility classes, following conventions similar to shadcn/ui.
Core Technologies & Architecture
The UI library is built on a set of core dependencies that work together to provide a robust and maintainable component system.
Sources: package.json
Key Dependencies
| Dependency | Role |
|---|---|
react | The core UI library for building components. |
@radix-ui/react-* | A collection of unstyled, accessible UI primitives (e.g., Dialog, Tabs, Checkbox). |
tailwindcss | A utility-first CSS framework for styling the components. |
class-variance-authority | A utility for creating variants of components (e.g., different button styles). |
clsx | A utility for conditionally joining class names together. |
tailwind-merge | A utility to intelligently merge Tailwind CSS classes without style conflicts. |
lucide-react | Provides a set of simple and clean icons used across the application. |
Sources: package.json:10-29
Architectural Layers
The component architecture follows a layered approach, where accessible primitives from Radix UI are wrapped and styled with Tailwind CSS to create the application's custom UI components. The cn utility function, which combines clsx and tailwind-merge, is a key part of this architecture for managing dynamic and conditional styling.
This diagram illustrates the architectural stack of the UI component library.
UI Primitives
The library contains a set of foundational UI primitives located in src/components/ui/. These are direct wrappers around Radix UI components, styled with Tailwind CSS.
Tabs
The Tabs component is used for creating tabbed interfaces, allowing users to switch between different views or sections of content. It is composed of Tabs, TabsList, TabsTrigger, and TabsContent.
Usage Examples:
- CVSS Version Switching: In
CVSSCalculator.tsx, it allows users to select between CVSS v4.0, v3.1, v3.0, and v2.0. - Metric Grouping: In
CVSSGenericCalculator.tsx, it organizes CVSS metrics into logical groups like "Base", "Temporal", and "Environmental".
Sources: src/components/ui/tabs.tsx, src/components/CVSSCalculator.tsx:142-155, src/components/CVSSGenericCalculator.tsx:311-331
Sheet
The Sheet component provides a slide-out panel that can appear from any side of the screen. It is used for displaying content like navigation menus on mobile devices. It is composed of parts like Sheet, SheetTrigger, SheetContent, and SheetHeader.
Usage Example:
- Mobile Navigation: The
Headercomponent uses aSheetto display the main navigation links when the screen size is small (less thanmdbreakpoint). The menu slides in from the right.
The following diagram shows the user interaction flow for opening the mobile navigation sheet.
Dialog
Dialogs are used to present modal views for focused tasks like editing data, confirming actions, or displaying detailed information. The library uses Radix UI's Dialog primitive, as seen in components like ScoreHistory and ComparisonDialog.
Usage Examples:
- Editing Score Names: The
ScoreManageruses anEditDialogto allow users to update the name of a saved score. - Comparing Scores: The
ComparisonDialogdisplays a side-by-side comparison of two or more selected scores.
Sources: src/components/ScoreHistory.tsx:268-296, 908-919, src/components/comparison-dialog.tsx
Other Primitives
The application makes extensive use of several other UI primitives to build its interface.
| Component | Description | Example Usage File |
|---|---|---|
Card | A container with a border and shadow, used to group related content. | src/components/cvss-calculator/ScoreCard.tsx |
Accordion | A vertically stacked set of interactive headings that each reveal a section. | src/components/FAQAccordion.tsx |
Table | Used to display tabular data, for example, in the score history. | src/components/ScoreHistory.tsx |
Badge | Displays small amounts of information, such as severity levels or status tags. | src/components/cvss-calculator/ScoreCard.tsx:41 |
Button | An interactive element used for actions like submitting forms or toggling state. | src/components/Header.tsx:110 |
Checkbox | Allows users to select one or more items from a set. | src/components/ScoreHistory.tsx:220 |
Input | A text input field for user data entry. | src/components/ScoreHistory.tsx:308 |
Sources: src/components/cvss-calculator/ScoreCard.tsx, src/components/FAQAccordion.tsx, src/components/ScoreHistory.tsx, src/components/Header.tsx
Composite Components
Composite components are higher-level components built by combining UI primitives to create specific application features.
ScoreHistory / ScoreManager
This is a complex component that demonstrates the power of the UI library. It combines multiple primitives to create a feature-rich score management interface.
The diagram below shows how the ScoreManager is composed of various UI primitives.
Sources: src/components/ScoreHistory.tsx
CVSSCalculator
This component serves as the main entry point for the calculators. It uses Tabs to allow users to switch between different CVSS versions. Each tab then renders a CVSSGenericCalculator instance, which itself is a composite component built from Tabs, RadioGroup, Card, and other primitives to create the interactive calculator form.
Sources: src/components/CVSSCalculator.tsx:142-199, src/components/CVSSGenericCalculator.tsx
Header and Footer
These components define the main layout and navigation of the application.
- The
HeaderusesButtonfor the theme toggle andSheetfor the mobile navigation menu. - The
Footerprovides structured links to resources, community pages, and legal information.
Sources: src/components/Header.tsx, src/components/Footer.tsx
Summary
The Quant UI Component Library is a well-architected system that leverages Radix UI for accessibility and Tailwind CSS for styling. Its composable nature, seen in both low-level primitives and high-level composite components, allows for the efficient development of a consistent, responsive, and feature-rich user interface. The clear separation of concerns and reliance on established patterns make the UI codebase maintainable and scalable.