@vbss-ui

Build beautiful UIs with minimal effort

vbss-ui is a modern and customizable UI components library designed to simplify the process of building web applications. With vbss-ui, you can create responsive and attractive interfaces using a minimal setup, just import the components you need, and you're ready to go!

Each component is available as an independent package, allowing you to keep your project lightweight by installing only what you need.

Built with Modern Technologies

vbss-ui is built with the latest frontend technologies to ensure performance, maintainability, and ease of use:

• React for a declarative UI development experience
• TypeScript for type safety and better developer experience
• Tailwind CSS for rapid and consistent styling
• Monorepo managed with Lerna for scalable package management
• Built with Vite for fast development and optimized builds

Built-in TypeScript Support

No need to install additional type definitions, vbss-ui comes with built-in TypeScript support. This ensures a seamless development experience with autocompletion and type checking out of the box.

Open Source & Community-Driven

vbss-ui is an open-source project, and the code is available on GitHub. Contributions and feature requests are always welcome! If you have suggestions, issues, or ideas, feel free to open a pull request or an issue on the repository.

Available Components

Here's a list of all available components in the VBSS UI library:

Component	Documentation	Package
Button	View Documentation	@vbss-ui/button
Chip	View Documentation	@vbss-ui/chip
Chips	View Documentation	@vbss-ui/chips
Checkbox	View Documentation	@vbss-ui/checkbox
Dialog	View Documentation	@vbss-ui/dialog
Dropdown	View Documentation	@vbss-ui/dropdown-menu
History Nav	View Documentation	@vbss-ui/history-nav
Input	View Documentation	@vbss-ui/input
Input Number	View Documentation	@vbss-ui/input-number
Popover	View Documentation	@vbss-ui/popover
Radio Group	View Documentation	@vbss-ui/radio-group
Switch	View Documentation	@vbss-ui/switch
Table	View Documentation	@vbss-ui/table
Textarea	View Documentation	@vbss-ui/textarea
Tooltip	View Documentation	@vbss-ui/tooltip

---

Installation

Adding Components to Your Project

Install only what you need

Since each component is distributed as a separate package, you can install only the components required for your project.

For example, to install the Button component, use one of the following commands

# Using npm
npm install @vbss-ui/button

# Using yarn
yarn add @vbss-ui/button

Usage

After installation, import the component and use it in your project:

import { Button } from "@vbss-ui/button";

export const App = () => {
  return (
    <div>
      <Button>Click Me</Button>
    </div>
  );
};

Color Customization

Customize Your Component Colors

vbss-ui allows you to easily customize the color scheme of the components to match your brand or design system. By default, the library provides a clean and modern palette, but you can override these values to create a unique look.

Default Color Palette

Out of the box, vbss-ui comes with the following color scheme:

:root {
  --primary: 248 39% 39%;
  --secondary: 248 53% 58%;
  --highlight: 271 76% 53%;
  --text: 0 0% 0%;
  --background: 0 0% 100%;
}

Customizing Colors

To override these defaults, create a CSS file (e.g. custom-colors.css) and define your custom colors using HSL format:

:root {
  --primary: 200 100% 50%;     /* Bright blue primary */
  --secondary: 340 82% 52%;    /* Pink secondary */
  --highlight: 45 100% 51%;    /* Yellow highlight */
  --text: 0 0% 100%;           /* Light text */
  --background: 220 15% 20%;   /* Dark background */
}

Then, import this file into your project:

import './custom-colors.css'

How It Works

• These colors are automatically applied to all vbss-ui components
• You only need to define the variables you want to change
• The HSL format makes it easy to adjust hue, saturation, and lightness for fine-tuned color control

More

For more information, please visit the repository or check out the documentation at ui.vbss.io.

To see the components in action, run Storybook locally. Navigate to the repository directory and execute:

npm run storybook