ESX UI Kit React

Reusable ESX UI Kit components for React applications. The package ships compiled JavaScript, TypeScript declarations and a ready-to-import CSS file.

Installation

npm install esx-ui-kit-react

Peer dependencies:

npm install react react-dom

Usage

Import the stylesheet once in your app entry file.

import 'esx-ui-kit-react/style.css'

Then import the components you need.

import { Button, Card, CardContent, Input } from 'esx-ui-kit-react'

export function Example() {
  return (
    <Card variant="bordered">
      <CardContent>
        <Input label="Player name" placeholder="Enter your name" />
        <Button variant="primary" size="md">
          Continue
        </Button>
      </CardContent>
    </Card>
  )
}

Available Components

• Alert
• Avatar
• Badge
• Button
• Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter
• Checkbox
• Input
• Progress
• Radio
• Tabs
• Textarea
• Toggle

Styling

The package includes its own compiled CSS, so the consuming project does not need Tailwind CSS to use the components.

For the intended typography, load Poppins in your app if it is not already available:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">