JUI Lib

JUI Lib is a powerful and versatile component library built with Vue 3. It provides a collection of reusable, accessible, and highly customizable UI components to streamline your development process. Whether you’re building complex applications or simple user interfaces, JUI Lib is designed to help you create seamless and responsive designs effortlessly.

Table of Contents

• Features
• Installation
• Dependencies
• Components
• Usage
• Documentation
• Contributing
• License

Features

• Built with Vue 3 for modern web development.
• TailwindCSS integration for styling consistency.
• A wide range of UI components to cover common UI patterns.
• Fully customizable and responsive design.
• Comprehensive documentation with live examples.

Installation

To install JUI Lib in your Vue project, use npm or yarn:

npm install jui-lib

Or with yarn:

yarn add jui-lib

Dependencies

Required Dependencies:

• vue
• vue3-popper

Development Dependencies:

• @tiptap/pm
• @tiptap/starter-kit
• @tiptap/vue-3
• @vitejs/plugin-vue
• sass-embedded
• vite
• tailwindcss

Ensure these dependencies are installed and properly configured in your project for seamless integration.

Components

The library includes the following components:

General Components

• AccordionDefault
• AlertDefault
• BadgeDefault
• BadgeKeyboard

Avatar Components

• AvatarDefault
• AvatarInitials
• AvatarPlaceholder
• AvatarStack

Breadcrumb

• BreadcrumbDefault

Button Components

• ButtonDefault
• ButtonIcon

Form Components

• FormDefault
• FormGroup
• FormLabel

Grid

• GridDefault

Input Components

• CheckboxInput
• DateInput
• EmailInput
• FileDrop
• IconInput
• NumberInput
• PasswordInput
• RadioInput
• SearchInput
• SelectInput
• SelectInputCheckbox
• SelectInputRadio
• TextAreaInput
• TextEditorInput
• TextInput
• ToggleInput

Loaders

• LoaderDefault

Modal Components

• ModalConfirm
• ModalDefault

Page Components

• PageDefault
• PageHeader

Placeholder Components

• PlaceholderAvatar
• PlaceholderBarChart
• PlaceholderImage
• PlaceholderText

Profile Components

• ProfileApp
• ProfileDefault

Table Components

• TableBody
• TableContainer
• TableHeader
• TablePagination

Tabs

• TabsPills
• TabsUnderline

Toast Components

• ToastDefault
• ToastWrapper

Tooltip

• TooltipDefault

Usage

After installing the library, import and use the components in your Vue application. Here's a quick example:

Example Usage

<template>
  <div>
    <AvatarDefault :src="'/path/to/avatar.jpg'" />
    <ButtonDefault @click="handleClick">Click Me</ButtonDefault>
    <ToastWrapper>
      <ToastDefault message="Hello, World!" />
    </ToastWrapper>
  </div>
</template>

<script>
import {
  AvatarDefault,
  ButtonDefault,
  ToastWrapper,
  ToastDefault,
} from "jui-lib";

export default {
  components: {
    AvatarDefault,
    ButtonDefault,
    ToastWrapper,
    ToastDefault,
  },
  methods: {
    handleClick() {
      alert("Button clicked!");
    },
  },
};
</script>

Documentation

Detailed documentation for all components, including available props and live examples, is available at:
JUI Lib Documentation

License

JUI Lib is licensed under the MIT License. Feel free to use it in your personal and commercial projects.

Happy Coding! 🎉