Skip to main content
The Axmed Design System provides a complete suite of React components built on Ant Design, customized for pharmaceutical procurement workflows. All components are fully typed with TypeScript and optimized for accessibility.

​
Component Categories

​
Core Components

Essential UI elements for building any interface.

Button

Primary actions with multiple variants and states

Text

Typography system with headings and body text

Input

Form inputs with labels, hints, and validation

Input OTP

One-time password input for verification flows

​
Data Display

Components for presenting information to users.

Table

Responsive data tables with sorting and filtering

Tag

Status indicators with semantic tones

Badge

Notification badges and counters

Card

Content containers with headers and footers

​
Overlays

Components that appear above the main content.

Modal

Dialog overlays for focused interactions

Drawer

Side panels for detailed views and forms

​
Navigation & Layout

Components for organizing and navigating content.

Header

Application headers with branding and navigation

SideNav

Vertical navigation for multi-page applications

Steps

Multi-step process indicators

​
Utility Components

Specialized components for specific use cases.

Empty State

Placeholder states for empty data views

Brand

Axmed logo and branding elements

Company Logo

Dynamic company logo display

Filter Bar

Search and filter controls

Action Menu

Dropdown menus for contextual actions

Stat Card

Dashboard metric cards with trends

File Item

File upload and display component

Uploader

Drag-and-drop file upload interface

​
Design Principles

​
Consistency

All components follow the same design language, using consistent spacing, colors, and interaction patterns.

​
Accessibility

Components are built with ARIA attributes, keyboard navigation, and semantic HTML.

​
Responsiveness

Components adapt to different screen sizes with mobile-first design patterns.

​
Type Safety

Full TypeScript support with exported prop types and interfaces.

​
Getting Started

All components are imported from the design system package: 
import { AxButton, AxText, AxInput } from 'axmed-design-system'

function MyComponent() {
  return (
    <div>
      <AxText variant="heading-lg">Welcome</AxText>
      <AxInput label="Email" placeholder="[email protected]" />
      <AxButton>Submit</AxButton>
    </div>
  )
}

​
Component Status

All components are production-ready and actively used in the Axmed marketplace platform. They are tested across:
  • Modern browsers (Chrome, Firefox, Safari, Edge)
  • Mobile devices (iOS, Android)
  • Screen readers (NVDA, JAWS, VoiceOver)

​
Need Help?

Each component page includes:
  • Real code examples from the codebase
  • Prop documentation and types
  • Common use cases and patterns
  • Links to full API references

Build docs developers (and LLMs) love

Get started for freeTalk to us