Skip to content

fluid-design-io/vision-ui

Repository files navigation

Ladning

Vision UI

Important

🎉 VisionUI 26 is coming soon! Star this repo or keep an eye on it to follow along.

See the VisionUI 26 Announcement here

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.

Ornament

Environments

Demo

VisionUI 26 Updates

TL;DR

VisionUI 26 is a complete rewrite of Vision UI. By merging the Vision OS UI with Next.js layout, we have improved navigation, components, and performance, while also making it more accessible.

You can checkout the WIP demo here

Alert

  • More primitive & React-Native-styled components
    • Alert API
    • Sidebar
    • Stack
    • Ornament
    • Button
    • Dropdown Menu
    • Grid List
  • Better navigation using Next JS layout as wrapper for ornament, sidebar components.
  • Improve performance
    • Clean up unessessary divs
    • Better component refactoring
  • Sound effects

Demo Video

Demo Video

How to use

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

Install motion/react in your project.

npm install motion/react

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


The Documentation is powered by FumaDocs