Vision UI

Experimental

The UI may look different on your browser. For best results, use Safari or Chrome.

What is Vision UI?

Vision UI is a collection of components that follow the VisionOS design language.

It uses most of the components from shadcn/ui for the underlying components with others using radix-ui.

Is this for production?

No, while the components are built with extreme attention to detail, it is not meant to be used in production. This is a playground for playing with VisionOS design language.

However, you are more than welcome to use this for your own projects.

How to use

This project assumes you already have shadcn/ui configured in your project.

Install framer-motion in your project.

npm install framer-motion

Then copy/paste the component you want to use into your project.

Some components require other components to work.

Eg. NavigationBar requires Window to work.

Components

Button

Clickable elements

Cursor

Animated cursor for Vision UI

Hoverable

Hoverable elements

Ornament

Vertical tab bar with custom scrollbar

Window

Glass effect with highlights