Skip to main content

​
Introduction

The Auction Platform component library provides a set of reusable, accessible, and customizable UI components built with React and TypeScript. These components follow consistent design patterns and are optimized for building modern auction platform interfaces.

​
Design Philosophy

Our component library is built on these core principles:
  • Type Safety: All components are fully typed with TypeScript for better developer experience and fewer runtime errors
  • Composability: Components are designed to work together seamlessly and can be composed to build complex UIs
  • Accessibility: Built with accessibility in mind, following WCAG guidelines
  • Flexibility: Components accept standard HTML attributes and can be customized with className and style props
  • Performance: Optimized for performance with React.forwardRef for proper ref handling

​
Available Components

Button

Versatile button component with multiple variants, sizes, and states for user interactions

TextField

Flexible input field with label, error states, and icon support for form controls

Typography

Unified text rendering component for headings, paragraphs, and labels with consistent styling

CardContainer

Simple container component for wrapping content in a styled card layout

​
Installation

All components are located in the src/shared/ui directory and can be imported directly: 
import { Button } from '@/shared/ui/button/Button';
import { TextField } from '@/shared/ui/TextField/TextField';
import Typography from '@/shared/ui/Typography/Typography';
import CardContainer from '@/shared/ui/CardContainer/CardContainer';

​
Quick Start

Here’s a simple example combining multiple components: 
import { Button } from '@/shared/ui/button/Button';
import { TextField } from '@/shared/ui/TextField/TextField';
import Typography from '@/shared/ui/Typography/Typography';
import CardContainer from '@/shared/ui/CardContainer/CardContainer';
import { Search } from 'lucide-react';

function LoginForm() {
  return (
    <CardContainer>
      <Typography as="h2" weight="bold">
        Sign In
      </Typography>
      
      <TextField
        label="Email"
        type="email"
        placeholder="Enter your email"
        LeftIcon={Search}
      />
      
      <Button variant="primary" size="lg" block>
        Log In
      </Button>
    </CardContainer>
  );
}

​
Common Patterns

​
Form Layouts

Combine TextField and Button components for form interfaces: 
<form>
  <TextField
    label="Username"
    placeholder="Enter username"
    error={hasError}
    helperText="Username is required"
  />
  
  <Button type="submit" variant="primary">
    Submit
  </Button>
</form>

​
Card-Based Layouts

Use CardContainer to create organized content sections: 
<CardContainer>
  <Typography as="h3" weight="medium">
    Auction Item
  </Typography>
  <Typography as="p" size="text-sm">
    Current bid: $150
  </Typography>
  <Button variant="primary">Place Bid</Button>
</CardContainer>

​
Styling

All components use CSS Modules for scoped styling. Each component has its own .module.css file that can be customized to match your design system.

​
Custom Styling

Components accept className and style props for custom styling: 
<Button 
  className="custom-button" 
  style={{ marginTop: '20px' }}
>
  Custom Styled Button
</Button>

​
Next Steps

Button Component

Learn about button variants, sizes, and usage

TextField Component

Explore input fields and form controls

Build docs developers (and LLMs) love

Get started for freeTalk to us