Skip to main content
Get started with Axmed Design System and build your first component in minutes.
1

Install the package

Add Axmed Design System to your React project:
npm install axmed-design-system antd @ant-design/icons react react-dom
Axmed Design System requires React 18+, Ant Design 5+, and @ant-design/icons 5+ as peer dependencies.
2

Import the CSS

Import the design system’s stylesheet in your application entry point (e.g., main.tsx or App.tsx):
import 'axmed-design-system/style.css'
This imports all design tokens (typography, colors, spacing) and component styles. The Figtree font is loaded automatically.
3

Build your first component

Create a simple welcome card using Axmed components:
import { AxButton, AxCard, AxText } from 'axmed-design-system'

function WelcomeCard() {
  return (
    <AxCard
      title="Welcome to Axmed"
      description="Healthcare marketplace platform"
    >
      <AxText variant="body-md" color="secondary">
        Get started by exploring our component library and building
        production-ready healthcare applications.
      </AxText>
      
      <div style={{ marginTop: '16px', display: 'flex', gap: '8px' }}>
        <AxButton variant="primary">
          Get Started
        </AxButton>
        <AxButton variant="secondary">
          View Docs
        </AxButton>
      </div>
    </AxCard>
  )
}

export default WelcomeCard
4

Explore core components

Try out the essential components:
import { AxButton } from 'axmed-design-system'
import { PlusOutlined } from '@ant-design/icons'

function ButtonShowcase() {
  return (
    <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
      <AxButton variant="primary">Primary</AxButton>
      <AxButton variant="secondary">Secondary</AxButton>
      <AxButton variant="ghost">Ghost</AxButton>
      <AxButton variant="danger">Danger</AxButton>
      <AxButton variant="primary" icon={<PlusOutlined />}>
        With Icon
      </AxButton>
    </div>
  )
}

import { AxText } from 'axmed-design-system'

function TypographyShowcase() {
  return (
    <div>
      <AxText variant="heading-2xl">Extra Large Heading</AxText>
      <AxText variant="heading-lg" weight="semibold">
        Section Title
      </AxText>
      <AxText variant="body-md" color="secondary">
        This is body text with secondary color
      </AxText>
      <AxText variant="body-sm" color="link">
        Learn more →
      </AxText>
    </div>
  )
}

import { AxCard, AxText, AxButton } from 'axmed-design-system'

function OrderCard() {
  return (
    <AxCard
      title="Order #ORD-2024-1234"
      description="Pharmaceutical supplies order"
      extra={<AxButton variant="text" size="small">View Details</AxButton>}
      footer={
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <AxText variant="body-sm" color="secondary">
            Due: Jan 15, 2024
          </AxText>
          <AxText variant="body-sm" weight="semibold">
            $12,450.00
          </AxText>
        </div>
      }
    >
      <AxText variant="body-md">
        45 items • Supplier: MedPharm Inc.
      </AxText>
    </AxCard>
  )
}

​
Next Steps

Component Overview

Browse all 21+ components with examples

Design Foundations

Learn about typography, colors, spacing, and motion

API Reference

Complete prop documentation for every component

Installation Guide

Detailed setup instructions and configuration

​
Need Help?

Join our community or check the full documentation for more examples and best practices.

Build docs developers (and LLMs) love

Get started for freeTalk to us