UI Thing

Tree

A tree view widget displays a hierarchical list of items that can be expanded or collapsed to show or hide their child items, such as in a file system navigator.

Radix-Vue
API Reference

Source code

Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

npx ui-thing@latest add tree

Usage

Basic

The Tree component can be styled to look like anything you want. For that reason, I decided to not style the tree component at all. Instead, I provide a basic example of how to use the tree component.

    Nuxt 4 directory structure

  • app
  • app.config.ts
  • app.vue
  • router.options.ts
  • server
  • nuxt.config.ts

Virtualizer

We can render a large number of items using the Virtualizer component.

Click on one of the items to see the details.

    Contact List

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Vue Sonner

Vue Sonner is an opinionated toast component for Vue. It's customizable, but styled by default. Comes with a swipe to dismiss animation.