# undraw-ui adds comments, folding and search to a Vue 3 app

> undraw-ui is a Vue 3 component library whose four headline features are folding, comments, search and anchors, with a dark theme for the comment component. It is built on Element Plus rather than shipping its own widget set, and the documentation puts the two import styles side by side, recommending on-demand registration through unplugin-vue-components and treating a global registration as the fallback.

**readpage/undraw-ui** — vue评论组件，🔥基于vue3的UI组件，主要功能有评论，聊天，搜索，锚点。你的⭐️Star ，是作者开发的动力！

- Repository: https://github.com/readpage/undraw-ui
- Website: https://readpage.github.io/undraw-ui/
- Stars: 985 · Forks: 24
- Language: Vue
- License: MIT
- Published: 2026-10-20 · Updated: 2026-10-20 · Language: en
- Canonical page: https://hysenlabs.com/projects/readpage-undraw-ui

## Four features, and a dark theme

The library is described as a Vue 3 UI library, and the feature section names four things: folding, comments, anchors and search. Folding is the collapsible section, with a line prop that appears to control the clamp, and the documentation example shows the property being used to start a section already expanded. Comments are the substantial one, with a component page in the documentation, a basic usage example built on a Vite template and a separate example that includes the backend side of a comment system, which tells you the component expects a server behind it rather than managing the data itself. Search is a text input whose results scroll dynamically as you type, and the anchors component is the fourth. The comment component also ships a dark theme, and the documentation points at separate assets for the dark screenshot, so theming is part of the component rather than something you add afterwards.

## It stands on Element Plus

The dependency list explains the relationship with Element Plus. The library depends on element-plus at a pinned version, along with the Element Plus icon package, VueUse for composition utilities, highlight.js with a Vue plugin for code rendering, vue-dompurify-html for sanitising HTML, vue-router, and VitePress for the documentation site, and the package itself is published as undraw-ui. The install line in the documentation shows the two packages side by side, and the note next to it says that the version of Element Plus can be chosen as needed, which is the practical point, since a project that already has a different Element Plus version should not be forced into this one. The library is also published on npm under the name undraw-ui, and the repository is mirrored between Gitee and GitHub, with a HelloGitHub recommendation badge on the README.

## On-demand registration, the recommended path

The import section leads with the approach the documentation recommends, which is importing only the components you use. That path needs a plugin, and the documentation names it, requiring two plugins to be installed first:

```sh
npm install -D unplugin-vue-components
```

and then a change to the bundler configuration, whether that is vite.config.ts or vue.config.js, to register the resolver:

```ts
import Components from 'unplugin-vue-components/vite'
import { UndrawUiResolver } from 'undraw-ui/es/resolvers'

export default {
  plugins: [
    Components({
      resolvers: [UndrawUiResolver]
    }),
  ],
}
```

The resolver is the piece that teaches the bundler how to find the components, so a template can use a component tag without an explicit import in the file. The documentation marks the on-demand approach as recommended, and the alternative as the one to ignore if you do not care about the size of the bundle after packaging.

## The global alternative, and what it costs

The second import style registers everything at application start, and the documentation is honest about the condition under which it is worth doing, which is if you are not too concerned about the size of the bundled file. The code is the familiar Vue application bootstrap:

```ts
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import UndrawUi from 'undraw-ui'
import 'undraw-ui/dist/style.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(UndrawUi)
app.mount('#app')
```

Note the two style imports, since both libraries ship their own stylesheet and a global registration without them produces an unstyled application. The two approaches are equivalent from the code's point of view, and the difference is entirely in what ends up in the bundle, which is why the on-demand path is listed first.

## The component surface in practice

The fold example in the documentation shows the shape of the API, with a component tag that takes a line prop, a divider component between sections, and an additional attribute that starts a section expanded. The comments are documented separately because they need a backend, and the documentation links three things for them: the component page, a basic usage example built on a Vite template, and an example with a backend implementation. The search component is the one with unusual behaviour, since the input triggers a dynamic scroll of results as the keyword changes, which is a small detail with a real usability consequence, since a list that jumps while you are typing is either helpful or maddening depending on the implementation. The theme story is consistent, since the comment component ships with a dark variant and the library works alongside Element Plus, which already provides the dark mode switching.

## The repository and how the project is built

The top level is a Vite project with the library in packages/ and a full demo application in demo/, where the demo has its own App.vue, main.ts, a router, a layouts directory, a plugins directory, a views directory, a type directory, a util directory and assets. The documentation is a VitePress site under docs/ with its own dev, build and preview scripts, and the scripts section also has the usual Vite dev and preview commands, a format command running prettier over the TypeScript, JavaScript, JSON and Vue files, and a commit command that uses commitizen to write the conventional commit message and push it. The linting and formatting rules are in .eslintrc.cjs and .prettierrc.cjs, the commit message rules in .commitlintrc.cjs, and the package manager is pnpm with a lockfile. The version field in the project file reads 0.0.0, which is a placeholder in a monorepo where the published package carries its own version, and the last push to the repository was on 2026-05-15. The licence is MIT, and the maintainers point at a QQ group for development discussion.

## Conclusion

undraw-ui fits a Vue 3 team that needs a comment thread, a collapsible section or a search box with a consistent look and does not want to build those widgets from scratch, and it fits a team already on Element Plus because the components inherit its visual language instead of fighting it. It does not fit a project that wants a component library with no framework assumptions, since the components are Vue only and lean on Element Plus for their primitives. It does not fit a team that wants a single global import without thinking about bundle size, although the documentation does explain that trade explicitly. Before you adopt it, decide on the import strategy, because the on-demand path needs the resolver plugin configured in your bundler, and note the release state, where the repository version field reads 0.0.0 while the published package and the documented install line refer to different versions.

## FAQ

### What does undraw-ui provide?

It is a Vue 3 component library whose main features are folding, comments, anchors and search, with a dark theme for the comment component. The library is built on Element Plus and published on npm as undraw-ui.

### How do I install undraw-ui?

With npm, installing Element Plus and the library together, for example npm i element-plus@2.6.0 undraw-ui@1.2.7. The documentation notes that the version of Element Plus can be chosen to match what the project already uses.

### How do I import the components on demand?

Install unplugin-vue-components as a development dependency and add the UndrawUiResolver to the resolvers list in vite.config.ts or vue.config.js. The documentation recommends this path over a global registration because it keeps unused components out of the bundle.

### Does the comment component need a server?

The documentation points to a separate example covering the backend side of a comment system, alongside the basic usage example and the component page, so the component is built to sit on top of an existing comment API rather than storing comments itself.

### Is undraw-ui still updated?

The repository is not archived and the last push was on 2026-05-15. The project file in the repository carries a placeholder version of 0.0.0 while the published package and the documented install line refer to different versions, and the licence is MIT.

## Sources

- [Issues](https://github.com/readpage/undraw-ui/issues)
- [License: MIT](https://github.com/readpage/undraw-ui/blob/master/LICENSE)
- [Project website](https://readpage.github.io/undraw-ui/)
- [README](https://github.com/readpage/undraw-ui/blob/master/README.md)
- [readpage/undraw-ui on GitHub](https://github.com/readpage/undraw-ui)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/readpage-undraw-ui