Plus UI -Tailwind CSS UI Library with a Design System

From design to development, we provide experience excellence for your web applications.

Plus UI is a new-era user interface and experience product that can be used with all popular frameworks and design tools together.

We offer the full functionality of components that are carefully designed to meet modern design standards and developed to create consistent web applications. Developers and designers can work together using a common set of tools and components, resulting in a more streamlined design and development process and consistent, user-friendly products.

✔ Centralized Token System that Bridging Design System and UI Library

✔ Multi-framework Support (works wherever HTML works such as React, Vue, Angular, Svelte and other JS frameworks)

✔ Rich and Functional Components

✔ Fully Customizable and Accessible

✔ Light Package Size

✔ Open-source

✔ Works with CDNs

✔ Created with Web Component Technology

✔ Built with Lit

✔ Includes a dark theme

✔ Integration with Tailwind CSS and Font Awesome

Our Products

Plus UI provides a collection of a professionally designed, highly customizable Design System and a Component Library built on a framework-agnostic technology with functional components.

Plus UI Design System is organized in a single figma folder which includes foundations and components. Each page includes design guidance and tools to help you to use and customize it.

https://www.figma.com/community/file/1310670219738074447/plus-ui-free-2024-design-system-for-figma

Quick Start

Embark on your Plus UI journey with a smooth start. Here’s how you can integrate our components into your project swiftly.

Installation

Begin by installing Plus UI into your project. Open your terminal, navigate to your project directory, and run:

npm install @plusui/core

or

yarn add @plusui/core

This command fetches and installs the latest version of Plus UI, setting the stage for a world of stunning interfaces.

Kick off your project with a Plus UI button. Here’s a snippet to add a simple yet elegant button to your application:

import { PlusButton } from 'plus-ui';

function App() {
  return <PlusButton onClick={() => alert('Hello, Plus UI!')}>Greet Me!</PlusButton>;
}
export default App;

With just a few lines, you’ve introduced the sophistication of Plus UI into your project!

Integration and Usage

Whether your project is built on React, Vue, Angular, Svelte or any other major framework,Plus UI is designed to fit right in.

React Installation

1- Install Plus UI and the associated React packages by entering the following command in your terminal or command prompt:

npm install @plusui/core @plusui/react

2- Import the Plus UI style file anywhere in the project (for example, in the index.css file

// example, app.(jsx, js, tsx, ts) folder//
import "@plusui/core/style.css";

3- Add Plus UI Component to React Component You can import and use Plus UI components in your React component.

import { PlusButton } from '@plusui/react';

function App() {

    return (
        <PlusButton status="primary">Primary Button</PlusButton>
    );
}
export default App;

Vue Installation

Please find below the installation guide for integrating the Plus UI component library into a Vue project using Vite:

1- Create a new Vue project using Vite:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // treat all tags with a dash as custom elements
          isCustomElement: (tag) => tag.includes("-"),
        },
      },
    }),
  ],
});

To learn more, please check how to use both Vue and Web Components.

2- Add Plus UI library to your component:
In your Vue component file, import the Plus UI library and its styles.

// YourComponent.vue

<script setup>
// your imports
import "@plusui/core";
import "@plusui/core/style.css";

</script>

3- Start using Plus UI components:
Now, you can use Plus UI components in your Vue project. Simply include them in your templates as needed.

<script setup>
// your imports
import "@plusui/core";
import "@plusui/core/style.css";

const handleClick = () => {
  console.log("Hello Plus UI");
};
</script>

<template>
  <plus-button status="primary" @plus-click="handleClick">Hello Plus UI</plus-button>
</template>

<style scoped>
 // your custom styles
</style> 

Angular Installation

1- In the directory where your Angular project is located, open the terminal or command prompt and install the Plus UI package by typing the following command

npm install @plusui/core

2- Open the angular.json file, which is your Angular project file, and add the style file of Plus UI to the "styles" section. We will fetch this file from the node_modules directory.

"styles":[
    "src/styles.css",
    "node_modules/@plusui/core/dist/style.css"
],

3- Open the app.module.ts file within your Angular project. Perform the necessary import operations and add the CUSTOM_ELEMENTS_SCHEMA in the schemas section.

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import '@plusui/core';
// Other imports...

@NgModule({
  declarations: [ 
    // Other declarations...
  ],
  imports: [
    // Other imports...
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // needed to support custom elements
  // Other module metadata...
})
export class AppModule { }

4- Open an Angular component file within your project and add an example using the Plus UI component.

<plus-button status="primary">Primary Button</plus-button>

Svelte Installation

Install plusui core library:

npm install @plusui/core

Import into your project:




<script>
/* your scripts. here. */
import '@plusui/core';
import '@plusui/core/style.css'; </script>
<main>
<h1>Hello Plus UI</h1> <div>
<plus-button status="primary">Click me</plus-button> </div>
</main>
<style>
/* your styles here */
</style>
 

npm run dev