Components#

This section contains documentation for the UI components used in the CV Generator application.

Overview#

The component library is built with React and TypeScript, using Tailwind CSS for styling and Class Variance Authority (CVA) for dynamic styling configurations.

Components#

All components are listed alphabetically:

• Badge - Status and category indicators
• Button - Primary, secondary, and ghost button variants
• Calendar - Date picker component
• Card - Card container component
• Checkbox - Toggle input component
• FormattedDate - Formatted date display component
• FormattedDateRange - Formatted date range display component
• IconButton - Icon button component
• PageHeader - Page header with title and actions
• Placeholder - Empty state and loading placeholders
• RangeSlider - Range slider input component
• SearchableSelect - Searchable dropdown with infinite scroll support
• Select - Dropdown select component
• StatusBadge - Status badge component
• Table - Data table with sorting and pagination
• Textarea - Multi-line text input
• TextInput - Text input with validation support

Design System#

All components follow a consistent design system based on the Catppuccin color palette, ensuring a cohesive user experience across the application.

Usage#

Components are exported from the @cv/ui package and can be imported as follows:

import { Button, TextInput, Table } from "@cv/ui";

Styling#

Components use Tailwind CSS utility classes with CVA for dynamic styling. The design system includes:

• Consistent spacing and typography
• Catppuccin color palette integration
• Responsive design patterns
• Accessibility features