# fish-ui: forty Vue 2 components in the Semantic CSS tradition
> fish-ui is a MIT licensed component kit for Vue 2, built in the Semantic UI style with Less stylesheets, a full suite of forms, tables, trees and pickers, and both a register everything import and a per component import. The judgement is that it is a competent but ageing Vue 2 library, useful as a reference for its component structure and unsuitable for any Vue 3 project.
**myliang/fish-ui** — A Vue.js 2.0 UI Toolkit for Web
- Repository: https://github.com/myliang/fish-ui
- Website: https://myliang.github.io/fish-ui/
- Stars: 903 · Forks: 86
- Language: Vue
- License: MIT
- Published: 2026-10-20 · Updated: 2026-10-20 · Language: en
- Canonical page: https://hysenlabs.com/projects/myliang-fish-ui
## Semantic CSS, rebuilt for Vue 2
fish-ui describes itself as a Vue.js 2.0 UI Toolkit for Web, and its lineage is stated in the acknowledgements, where semantic-ui is credited. That credit matters more than a usual thanks line, because the design approach follows from it. The feature list names semantic CSS components and stylesheets in Less as two of its characteristics, which means the components are classes and styles rather than a heavily prop-driven visual language, and the same markup conventions carry across the whole set. The rest of the stack is the tooling of its period: Vue.js with Moment and Vue-Router, ES6 with Babel 6, and Webpack 2.0 with Vue Loader. The published package is public rather than private, its main entry is src/index.js, and the licence is MIT. The documentation site is published at myliang.github.io/fish-ui, and the README points there and to a demo with screenshots of individual components.
## Forty components, and why half of them have plural twins
The component list is long enough that it is best read as a coverage map. It runs from BackTop, Button, Buttons, Calendar, Card, Carousel and CarouselItem through Cascader, Checkbox, Checkboxes, Col, DatePicker, Dropdown, Field, Fields, Form, Input, InputNumber, Layout, Menu, Message, Modal, Option, Pagination, Radio, Radios, Row, Select, Steps, Step, Submenu, Table, TabPane, Tabs, Tag, Tags, TimePicker, Upload, Tree, Tree Select, Transfer, and then Divider, Image and Timeline at the end. The pattern in that list is worth noticing, because it is a design decision rather than an accident. Several components appear twice, in a singular and a plural form, which in this style of library usually means the singular one handles a single value and the plural one manages a group of them, so a Form and a Field, a Field and a Fields, a Checkbox and a Checkboxes, a TabPane and a Tabs. The last three entries, Divider, Image and Timeline, sit apart from the rest and look like later additions to an established core.
## The install asks for a Less pipeline in your build
Installation is two commands, and the first one is the one people miss. The stylesheets ship as Less, so the less package and the less-loader have to be present in the build before the component library is useful:
```shell
npm install less less-loader -S
npm install fish-ui -S
```
That is the whole install step, and it tells you something about the library. It is not a zero configuration drop in, because the styles are compiled by your bundler rather than shipped as ready to use CSS, which is what lets a consumer override a colour or a spacing value with a variable before the rules are generated. The trade-off is that the consuming application inherits a build requirement and the source of that requirement, the less files, travels with the package. The README also expects the application to supply a font and an icon set, since the stylesheets reference them and the library does not bundle them.
## Register everything, or take one component at a time
There are two documented import paths, and they differ in more than convenience. The first registers the whole kit in one call:
```javascript
import Vue from 'vue'
import FishUI from 'fish-ui'
Vue.use(FishUI)
```
The second imports a single component and, just as importantly, its stylesheet separately:
```javascript
import 'fish-ui/styles/button.less'
import Button from 'fish-ui/src/components/Button.vue'
Vue.component(Button.name, Button)
```
The second path points straight at the source of a component under src/components and pulls the matching Less file from a styles directory, which means the bundler only has to process what you actually use. The registration pattern also shows the convention of the library, since a component exposes its own name and you register that name rather than passing a string. The README notes that the project also works with the vue-webpack-boilerplate from vue-cli, which is a hint about the build this library was written against rather than a compatibility promise.
## Fonts and icons are the consumer's problem
The quick start begins with two stylesheet links rather than with code, and they are the closest thing the README has to a dependency list. Font Awesome 4.7.0 is loaded from a CDN, and the Lato family is loaded from another CDN with the latin subset and the 400, 700, 400italic and 700italic weights:
```html
```
Two practical points follow. The icons in the components assume the Font Awesome 4 class names, so moving to a newer major version of that icon set is a breaking change rather than a restyle. And pulling fonts and icons from a third party CDN at runtime has consequences for a private deployment, since the request leaves your network and the page depends on an external service being reachable. The README does not document bundling those assets locally, so anyone deploying to an isolated network will have to solve that themselves.
## The build is Webpack 2 and Babel 6
The package.json tells you exactly how the library is built and what it drags in. The runtime dependencies are async-validator 1.8.1 for form validation rules, chart.js 4.4.0, moment 2.27.0 and vue 2.6.12 itself. The development side is a full Webpack 2 era toolchain, with babel-core and the babel-preset-env, babel-preset-es2015 and babel-preset-stage-2 packages, babel-loader, css-loader, extract-text-webpack-plugin, html-webpack-plugin, eslint with the standard config, autoprefixer and cssnano. The scripts are conventional for that generation, a dev server for local work, a production build, a separate publish build and a lint task over src. Two things are worth flagging for anyone reading this in 2026. The Babel 6 generation is long past its end of support, and moment, which is in the runtime dependencies, is a legacy date library. A new application that installs fish-ui is therefore inheriting a toolchain that exists to build the library, plus a runtime dependency list that a Vue 3 project cannot use.
## A library with no releases and a Vue 2 ceiling
The facts about the state of the project are short. The repository is not archived, the last push was on 2026-07-10, and it publishes no GitHub releases, so there is no tagged version history to consult. The package.json carries version 1.2.100, which is a patch-style number that has been incremented many times rather than a release series with notes. The browser support statement is modern browsers and Internet Explorer 9 with no test coverage, which is an honest admission that the old browser path is untested. The hard ceiling is Vue itself, since the dependency is pinned to Vue 2.6.12 and the API used for registration, Vue.use and Vue.component, is the Vue 2 global plugin API. A project on Vue 3 cannot use this kit as it stands. The realistic ways to use it are therefore two: install the package and register the components inside a Vue 2 application, or take the source of the individual components you need and port them, which is exactly what the manual import path is set up for and which leaves you maintaining the Less and the component code yourself.
## Conclusion
fish-ui is worth adopting for a Vue 2 application that wants Semantic style markup, needs the less common components such as Cascader, Tree Select or Transfer, and prefers to cherry pick a handful of source files over adding a large dependency. It is the wrong choice for a Vue 3 project, since the package pins Vue 2.6.12, and it is a poor match for a team that needs typed components, an active release train or documented accessibility behaviour, because the repository publishes no releases and its own compatibility note stops at Internet Explorer 9 without test coverage. Before you start, confirm your build can compile Less with less and less-loader, and read the style import path for each component you take, since a missing Less import is what makes a component render unstyled.
## FAQ
### How do I install fish-ui in a Vue project?
Install less and less-loader first, because the component stylesheets ship as Less, then install the kit itself with npm install less less-loader -S and npm install fish-ui -S. The styles are compiled by your own bundler, so the Less pipeline has to be in place before any component renders correctly.
### Can I import only some components from fish-ui?
Yes. The README documents a manual import that pulls the component source and its stylesheet separately, for example importing 'fish-ui/styles/button.less' and Button from 'fish-ui/src/components/Button.vue', then registering it with Vue.component(Button.name, Button).
### Does fish-ui work with Vue 3?
No. The package pins vue 2.6.12 as a runtime dependency and the documented registration uses the Vue 2 global plugin API, Vue.use and Vue.component. A Vue 3 project would need to port the components it wants from the src/components sources rather than install the kit.
## Sources
- [Issues](https://github.com/myliang/fish-ui/issues)
- [License: MIT](https://github.com/myliang/fish-ui/blob/master/LICENSE)
- [myliang/fish-ui on GitHub](https://github.com/myliang/fish-ui)
- [Project website](https://myliang.github.io/fish-ui/)
- [README](https://github.com/myliang/fish-ui/blob/master/README.md)
---
Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/myliang-fish-ui