ESX UI Kit Vue

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

Installation

npm install esx-ui-kit-vue

Peer dependency:

npm install vue

Usage

Import the stylesheet once in your app entry file.

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

Then import the components you need.

<script setup lang="ts">
import { Button, Card, CardContent, Input } from 'esx-ui-kit-vue'
</script>

<template>
  <Card variant="bordered">
    <CardContent>
      <Input label="Player name" placeholder="Enter your name" />
      <Button variant="primary" size="md">
        Continue
      </Button>
    </CardContent>
  </Card>
</template>

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">