Raya UI is not a traditional component library. It's a highly curated collection of re-usable, production-ready components designed for modern web engineers. You do not install it as a dependency; you copy and paste the code directly into your architecture.
Built on top of Shadcn Vue (powered by Reka UI) and Tailwind CSS, Raya UI delivers uncompromising accessibility, deep customization, and a premium aesthetic perfect for bento grid layouts, glassmorphism, and complex interactive dashboards.
Use the Shadcn Vue CLI to add components directly into your Nuxt or Vue project via the Raya UI registry:
npx raya-ui@latest add wheel-pickerImport and use it immediately with full TypeScript support:
<script setup lang="ts">
import { PixelatedButton } from '@/components/ui/pixelated-button'
</script>
<template>
<PixelatedButton>Initialize Engine</PixelatedButton>
</template>- Copy-Paste Architecture: No heavy dependencies or black-box npm packages. You own the component code entirely.
- WAI-ARIA Compliant: Leverages Reka UI primitives for guaranteed accessibility, screen-reader support, and keyboard navigation.
- Modern Aesthetic: Built-in support for complex UI patterns like Liquid Glass, Ambient Grids, and Magnetic interactions.
- Vue 3.5 & Nuxt 4 Optimized: Written from the ground up for the latest Vue ecosystem features and macros.
- Tailwind Native: Effortlessly themable using standard utility classes and design tokens.
When you add a component via the registry, Raya UI places it systematically into your project tree, ensuring your codebase remains pristine and modular.
your-project/
├── app/
│ └── components/
│ └── ui/
│ ├── pixelated-button/
│ │ ├── PixelatedButton.vue
│ │ └── index.ts
│ └── liquid-glass/
│ ├── LiquidGlass.vue
│ └── index.ts
├── utils/
│ └── cn.ts
└── tailwind.config.ts
This project is licensed under the MIT License - see the LICENSE file for details.