@vbss-ui/chips

wrapper component for multiple Chip elements.

The Chips component is a flexible container designed to render multiple Chip components in a customizable layout. It supports layout direction, spacing between chips, and allows passing shared props to chips.

Installation

1npm install @vbss-ui/chips
2# or
3yarn add @vbss-ui/chips

---

Usage

1import { Chips } from "@vbss-ui/chips"
2
3export const App = () => {
4  return <Chips chips={["Design", "Development", "Marketing"]} />
5};

---

Props

Prop	Type	Description	Default
chips	React.ReactNode[]	List of chip contents to render.	[]
gap	xs | sm | md | lg | xl	Defines the spacing between chips.	md
flexDirection	row | col	Determines the layout direction of the chips.	row
chipsProps	ChipProps	Props applied to Chip components. See Chip Props	-
as	React.ElementType	Defines the HTML element or component to render.	div
ref	React.Ref	Allows accessing the underlying DOM element.	-
className	string	Additional CSS classes for custom styling.	-
style	React.CSSProperties	Additional style for custom styling.	-

chipsProps Example

1<Chips
2  chips={["Chip"]}
3  chipsProps={{
4    as: "span",
5    variant: "primary"
6  }}
7/>

---

Customization

You can extend the default styles by passing custom styles names using className or style.

1<Chips
2  chips={["Chip 1", "Chip 2"]}
3  style={{
4    backgroundColor: "gray",
5    padding: "1rem",
6    borderRadius: "1rem" 
7  }}
8/>;

Or you can use the default component className chip.

1.chips {
2  background-color: blue;
3  padding: 10px;
4  border-radius: 5px;
5
6  .chip {
7    background-color: red;
8  }
9}
10

1import "./custom.css"
2
3export const App = () => {
4  return <Chips chips={["Chip 1", "Chip 2"]} />
5}

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:

1:root {
2  --background: 0 0% 100%;
3  --primary: 117 100% 47%;
4  --secondary: 248 53% 58%;
5}

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

1import "./custom-colors.css";

This will override the default colors with your custom colors.

---

More

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

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

1npm run storybook