Skip to main content

UI Overview

Welcome to the Wrkbelt UI documentation. Our component library is built with React and styled using Tailwind CSS, providing a beautiful and consistent user experience across the platform.

Core Concepts​

  • Component-First - Modular, reusable components as building blocks
  • Accessibility - WCAG 2.1 compliant with full keyboard navigation
  • Customization - Flexible theming system that adapts to your brand
  • Performance - Optimized bundle size and runtime performance

Key Sections​

Pages​

Complete page implementations:

  • Landing Pages
  • Dashboard
  • Settings
  • Authentication
  • Error Pages

Libraries​

Shared UI utilities and helpers:

  • Form Validation
  • Date Handling
  • Formatting
  • Analytics
  • Error Tracking

Key UX Flows​

End-to-end user experiences:

  • Onboarding
  • Scheduling
  • Payment Processing
  • Account Management
  • Settings Configuration

Patterns​

Common UI patterns and best practices:

  • Form Handling
  • Error States
  • Loading States
  • Responsive Design
  • Accessibility

Theming​

Common UI patterns and best practices:

  • Form Validation
  • Error Handling
  • Loading States
  • Responsive Design
  • Animation Guidelines

Getting Started​

  1. Environment Setup

    # Install dependencies
    pnpm install

    # Set up environment
    cp apps/ui/.env.example apps/ui/.env

  2. Start Development Server

    # Start the UI development server
    nx run ui:serve

    The UI will be available at http://localhost:4200

  3. Using Components

    import {
      Button,
      Card,
      CardContent,
      CardDescription,
      CardHeader,
      CardTitle,
      Input,
      Label,
      cn,
    } from '@wrkbelt/ui-components';

    function MyComponent() {
      return (
        <Card>
          <CardHeader>
            <CardTitle>Welcome</CardTitle>
            <CardDescription>Get started with our platform</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-6">
              <div className="grid gap-2">
                <Label htmlFor="name">Name</Label>
                <Input
                  id="name"
                  placeholder="John Doe"
                  className={cn(
                    'w-full',
                    errors?.name && 'border-destructive focus-visible:ring-destructive'
                  )}
                />
              </div>
              <Button>
                Get Started
              </Button>
            </div>
          </CardContent>
        </Card>
      );
    }
    tip

    Our components are built using ShadCN as a foundation, with additional customization and functionality added through our @wrkbelt/ui-components library. This provides a consistent design system while maintaining flexibility.

  4. Running Tests

    # Run UI tests
    nx run ui:test

    # Run UI tests with coverage
    nx run ui:test --coverage

    # Run UI tests in watch mode
    nx run ui:test --watch

Need Help?​