# Weightmans UI Components for Vue.js

[Docs](https://ui.weightmans.com/) • [Example](https://stackblitz.com/edit/weightmans-ui-vue-example?file=index.html)

[![npm](https://img.shields.io/npm/v/weightmans-ui-vue)](https://www.npmjs.com/package/weightmans-ui-vue)
[![npm](https://img.shields.io/npm/dm/weightmans-ui-vue)](https://www.npmjs.com/package/weightmans-ui-vue)

[![semantic-release: conventional](https://img.shields.io/badge/semantic--release-conventional-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)

Component library for Weightmans web apps created with Vue.js. Compatible with Vue >3.5

**This library is meant to be for internal use only.**

## 📦 Repo contents

- Weightmans UI Framework
  - Vue component library
  - Vite plugin
  - Nuxt module
  - Storybook addon
  - Vitepress theme
  - Test utils
  - Create Weightmans App CLI (linked)
- Storybook
- Documentation

## 🙌 Contribute

This library is open for contributions. Should you ever feel like you need something from the library but it's missing, feel free to open a pull request 🙂

## Development status

| Component           | Vue 3 | Figma | Notes |
| ------------------- | ----- | ----- | ----- |
| Accordion           | ✅    | ✅    |       |
| Accordion Group     | ✅    | ✅    |       |
| Application Logo    | ✅    | ✅    |       |
| Autocomplete        | ✅    | ✅    |       |
| Avatar              | ✅    | ✅    |       |
| Badge               | ✅    | ✅    |       |
| Breadcrumbs         | ✅    | ✅    |       |
| Button              | ✅    | ✅    |       |
| Card                | ✅    | ✅    |       |
| Checkbox            | ✅    | ✅    |       |
| Chip                | ✅    | ✅    |       |
| Collection Widget   | ✅    | ✅    |       |
| Content Field       | ✅    |       |       |
| Date Box            | ✅    |       |       |
| Date Field          | ✅    |       |       |
| DateTime            | ✅    |       |       |
| DevTools            | ✅    |       |       |
| Dropdown            | ✅    | ✅    |       |
| Dropdown Item       | ✅    | ✅    |       |
| Environment Badge   | ✅    |       |       |
| Feedback Card       | ✅    |       |       |
| Featured Items      |       | ✅    |       |
| Filters             | ✅    |       |       |
| Footer              | ✅    |       |       |
| Icon                | ✅    |       |       |
| InfoBox             | ✅    |       |       |
| Input Field         | ✅    |       |       |
| Line Chart          | ✅    |       |       |
| Loading Skeleton    | ✅    |       |       |
| Loading Spinner     | ✅    | ✅    |       |
| Logo                | ✅    | ✅    |       |
| Modal               | ✅    | ✅    |       |
| Navigation Bar      | ✅    | ✅    |       |
| Navigation Bar Item | ✅    | ✅    |       |
| Navigation Bar Tab  | ✅    |       |       |
| Notification        | ✅    | ✅    |       |
| Number Box          | ✅    |       |       |
| Pagination          | ✅    |       |       |
| Scroller            | ✅    |       |       |
| Search              | ✅    | ✅    |       |
| See The Possibility | ✅    | ✅    |       |
| Select Box          | ✅    |       |       |
| Select Field        | ✅    | ✅    |       |
| Sidebar             |       | ✅    |       |
| Sidebar Item        |       | ✅    |       |
| Stepper             |       | ✅    |       |
| Slider              | ✅    |       |       |
| Sort chip           | ✅    |       |       |
| Sort heading        | ✅    |       |       |
| Strands             | ✅    | ✅    |       |
| Switch              | ✅    | ✅    |       |
| Switch Box          | ✅    |       |       |
| Table               | ✅    | ✅    |       |
| Text Field          | ✅    | ✅    |       |
| Tooltip             | ✅    | ✅    |       |
| Upload              | ✅    |       |       |

## Installation

```sh
pnpm i
```

## Development

This will open Storybook on port 6006 to develop or test UI components.

```sh
pnpm dev
```

## Build

```sh
pnpm build
```

## Test

After making changes, or adding new features, make sure to write new stories, or edit them.

```sh
pnpm storybook
```

Then create a pull request and make sure all tests pass. If your pull request has visual changes, tests will fail.
You will need to approve each change in Chromatic and then after re-running the tests, they should pass.

© 2026 Weightmans LLP