discue

discue

A collection of reusable UI components for Vue 3 built for discue.io

Get Started

Accessible

Built with accessibility in mind, ensuring a great experience for everyone.

Consistent

Built from the ground up to provide a consistent user interface.

Simple

Polished and easy to integrate.

Stylish

Uses tailwindcss under the hood to provide modern look and feel.

Themeable

Easily customize the look and feel of the components to match your brand.

Open Source

MIT licensed and contributions are welcome.

Getting Started

This is a collection of Vue.js components used in discue.io. It's designed to be easily integrated into your Vue.js projects and offers a consistent, accessible, and stylish user interface.

Key Features

  • Accessibility: Built with accessibility best practices in mind.
  • Consistency: Provides a unified look and feel across all components.
  • Simplicity: Easy to use and integrate into your existing projects.
  • Style: Leverages Tailwind CSS for a modern and customizable design.
  • Theming: Allows for easy customization of component styles to match your brand.
  • Open Source: MIT licensed and welcomes community contributions.

Available Components

A full list of available components and their usage can be found in the component documentation.

Installation

Install the package via npm or yarn:

npm install @discue/ui-components

or

yarn add @discue/ui-components

Usage

Import the components you need and use them in your Vue templates:

<template>
  <FormInput 
    label="ZipCode" 
    description="Please enter a valid zip code" 
    pattern="[0-9]{5}" 
    format="85080" />
</template>

<script setup>
import { FormInput } from '@discue/ui-components'
</script>

Theming

To customize the component styles, you can register the theme plugin and pass a theme object:

import { createApp } from 'vue';
import App from './App.vue';
import { theme } from '@discue/ui-components';

createApp(App).use(theme, {
  // Customize theme properties here
  // See src/theme.js and src/theme-keys.js for available properties
  'TEXT_COLOR_DEFAULT': 'text-gray-500'
}).mount('#app');
<template>
    <Text>
        Ea officia nulla veniam eu enim tempor anim consectetur ut nostrud.
    </Text>
</template>

<script setup>
import { Text } from '@discue/ui-components'
</script>

Contributing

We welcome contributions! Please see our contribution guidelines for more information.

License

MIT License

Copyright (c) 2022 Stefan Pfaffel

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.