Ui

GhentCDH UI

A modular Vue.js component library styled with TailwindCSS, designed for GhentCDH projects. By overriding specific variables, the library can be customized for white-label use.

Features

• Vue.js components: Prebuilt UI elements for rapid development.
• TailwindCSS-based: Highly customizable design.
• White-label support: Modify variables to adapt the UI to different brands.
• Reusable and scalable: Built for consistency across projects.

Installation

pnpm add @ghentcdh/ui

npm install @ghentcdh/ui

yarn add @ghentcdh/ui

Usage

Register the styling

@use '@ghentcdh/ui/style.css' as *;

// Adjust the tailwind variables if necessary

// The projects tailwind should scan for
@source "./src";

Registering Components

Import the components in your Vue project:

<script setup>
import { Btn, Card } from "@ghentcdh/ui";
</script>

<template>
  <Card>
    <h2 class="text-lg font-bold">Welcome</h2>
    <p>This is a reusable UI component from GhentCDH UI.</p>
    <Btn>Click me</Btn>
  </Card>
</template>

Development & Contribution

To contribute, clone the repository and install dependencies:

git clone https://github.com/GhentCDH/ui.git
cd ui
npm install

Run the development server:

npm run dev

License

This project is licensed under the MIT License. See the LICENSE file for details.

credits

Bo Vandersteene, Ghent University.