UI Kit & Components
Relevant source files
The following files were used as context for generating this wiki page:
The UI Kit & Components system within the secondlayer project is a comprehensive, reusable design system implemented during Phase 5 of the frontend refactoring. It replaces legacy, hardcoded Tailwind styles with a structured library of accessible, type-safe components. The system is designed to ensure visual consistency across the legal tech platform, supporting complex features such as legal document analysis, court case searching, and real-time AI chat interactions.
The architecture is built upon a foundation of centralized design tokens, a variants-based component system, and strict adherence to WCAG 2.1 AA accessibility standards. This modular approach allows for rapid development of professional interfaces while significantly reducing code duplication and maintenance overhead.
Sources: lexwebapp/PHASE5_SUMMARY.md:10-20, lexwebapp/COMPLETE_REFACTORING_SUMMARY.md:120-135
Design Tokens
The project utilizes a centralized design system located in lexwebapp/src/constants/design-tokens.ts. These tokens define the visual language of the application, including color palettes, spacing scales, typography, and shadows.
Core Token Categories
| Category | Description | Examples |
|---|---|---|
| Colors | Semantic and palette-based colors. | primary[500], claude.accent, success.DEFAULT |
| Spacing | An 8px-based scaling system. | spacing[4] (16px), spacing[8] (32px) |
| Typography | Font families, sizes, and weights. | fontSize.lg (18px), fontWeight.semibold (600) |
| Shadows | Layering and elevation tokens. | shadows.md, shadows.lg |
| Breakpoints | Responsive design thresholds. | sm, md, lg, xl |
Sources: lexwebapp/UI_KIT_GUIDE.md:11-30, lexwebapp/PHASE5_SUMMARY.md:38-51
Component Architecture
The UI library follows a variants-and-sizes pattern, allowing developers to customize component appearance through standardized props rather than arbitrary CSS classes.
The diagram above illustrates how low-level design tokens inform base UI components, which are subsequently composed into complex, feature-specific specialized components.
Sources: lexwebapp/PHASE5_SUMMARY.md:125-150, lexwebapp/src/components/Message.tsx
Base UI Components
The library provides eight core components exported from src/components/ui/:
- Button: Supports 5 variants (primary, secondary, outline, ghost, danger) and 3 sizes. Includes built-in loading spinners and icon support.
- Input: Offers 3 variants (default, filled, flushed) with support for labels, helper texts, and error states.
- Card: Uses a composition pattern (
CardHeader,CardBody,CardFooter) with elevated and outlined variants. - Modal: Features 5 sizes, focus trapping, and Framer Motion animations for entry/exit.
- Badge: Semantic status indicators (success, error, warning, info) with optional dot indicators.
- Checkbox & Switch: Accessible form controls with custom styling and smooth animations.
- Spinner: A flexible loading indicator with 4 sizes and 3 color themes.
Sources: lexwebapp/UI_KIT_GUIDE.md:37-180, lexwebapp/PHASE5_SUMMARY.md:54-120
Specialized Legal Components
Beyond the base UI kit, the project implements specialized components tailored for AI-driven legal analysis, primarily found within the Message system.
The Message Component
The Message component handles the rendering of both user queries and assistant responses. It is highly sophisticated, managing Markdown formatting, legal code highlighting, and complex nested data structures.
- Legal Code Highlighting: Automatically detects and styles references to Ukrainian legal codes (e.g., ЦКУ, ГКУ, КПК).
- ThinkingSteps: An expandable component that displays the AI's reasoning chain progressively.
- DecisionCard: Displays relevant court cases with relevance percentages and legal status badges.
- AnalyticsBlock: Renders statistical data regarding case outcomes (Satisfied/Rejected/Partial) with trending indicators.
Sources: lexwebapp/src/components/Message.tsx:1-120, lexwebapp/DEPLOYMENT_STATUS.md:10-40
AI Response Data Flow
The sequence diagram shows how raw JSON data from the MCP backend is transformed by the LegalService into a typed Message model, which is then rendered by the Message component with specialized formatting.
Sources: lexwebapp/PHASE3_SUMMARY.md:50-100, lexwebapp/src/components/Message.tsx:48-75
Accessibility and Standards
All components are engineered to comply with WCAG 2.1 AA standards. Key accessibility features include:
- Keyboard Navigation: Full support for Tab navigation, Enter/Space activation, and Escape key for closing modals.
- Focus Management: Visible focus rings and focus traps within modal windows to prevent users from tabbing into background content.
- Screen Reader Support: Extensive use of ARIA labels, role attributes, and semantic HTML for state and error announcements.
- Color Contrast: All semantic color combinations maintain at least a 4.5:1 contrast ratio for normal text.
Sources: lexwebapp/PHASE5_SUMMARY.md:200-220, lexwebapp/UI_KIT_GUIDE.md:325-335
Usage Example: Composition
The system encourages composition where multiple UI components work together to form complex features.
import { Card, CardHeader, CardBody, Input, Button } from '../components/ui';
// Example of a login form using UI Kit components
function LoginForm() {
return (
<Card variant="elevated" className="max-w-md mx-auto">
<CardBody className="space-y-4">
<h2 className="text-2xl font-bold">Login</h2>
<Input label="Email" type="email" fullWidth />
<Input label="Password" type="password" fullWidth />
<Button variant="primary" fullWidth>Sign In</Button>
</CardBody>
</Card>
);
}
Sources: lexwebapp/PHASE5_SUMMARY.md:250-265, lexwebapp/UI_KIT_GUIDE.md:210-240
Summary
The UI Kit & Components module provides a production-ready design system that ensures the secondlayer platform remains visually consistent, technically scalable, and fully accessible. By centralizing design tokens and standardizing component behaviors, the project achieved a 90%+ reduction in lines of code within primary pages like ChatPage, while simultaneously improving the developer experience through comprehensive TypeScript coverage and professional-grade UI elements.
Sources: lexwebapp/COMPLETE_REFACTORING_SUMMARY.md:15-30, lexwebapp/PHASE5_SUMMARY.md:350-370