vbss-ui Library

⚠️ LEGACY VERSION WARNING ⚠️

This is a legacy/deprecated version of vbss-ui. Please use the latest version instead:

• GitHub Repository: https://github.com/vbss-io/vbss-ui
• Documentation: https://ui.vbss.io

The new version includes:

• Improved components with better TypeScript support
• Modular package structure (each component is a separate package)
• More features and better performance

Instead of installing all components at once, you can now install only the components you need:

npm install @vbss-ui/button @vbss-ui/input @vbss-ui/table ...
# or
yarn add @vbss-ui/button @vbss-ui/input @vbss-ui/table ...

Installation

First, you need to install the vbss-ui library. You can do this using either npm or yarn.

Using npm

Run the following command in your project directory:

npm install vbss-ui

Using yarn

Alternatively, if you prefer yarn, run:

yarn add vbss-ui

Importing the Styles

To use the vbss-ui components, you need to import the styles. Add the following line to your main file (e.g., index.js or main.js):

import "vbss-ui/dist/style.css";

Using the Components

Now you are ready to use the vbss-ui components. Let's start with the Button component. First, import the Button component in your file:

import { Button } from "vbss-ui";

Then, you can use the Button component in your JSX/TSX code:

function App() {
  return (
    <div>
      <Button>Click Me</Button>
    </div>
  );
}

export default App;

Customizing Colors (Optional)

If you want to customize the colors used in the vbss-ui components, you can create a custom CSS file with your desired color scheme. Create a .css file (e.g., custom-colors.css) and define your colors using HSL format as follows:

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

After creating your custom colors file, import it into your main file:

import "./custom-colors.css";

This will override the default colors with your custom colors.

You are now ready to use the vbss-ui components in your project

More

For more information, please visit the repository and run Storybook to see the components in action. Storybook provides an interactive way to explore and test the components.

To start Storybook, navigate to the repository directory and run:

npm run storybook

or

yarn storybook

Refs:

• Code With Gionatha
• Antonin Januska
• shadcn/ui