Jui-lib NPM | npm.io

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.

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>