https://github.com/sameerjs6/revola
A drop-in responsive dialog component built with Radix and Vaul - modal on desktop, drawer on mobile.
https://github.com/sameerjs6/revola
dialog drawer nextjs radix-ui react shadcn shadcnui
Last synced: 25 days ago
JSON representation
A drop-in responsive dialog component built with Radix and Vaul - modal on desktop, drawer on mobile.
- Host: GitHub
- URL: https://github.com/sameerjs6/revola
- Owner: SameerJS6
- License: mit
- Created: 2025-03-05T19:29:27.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-08-06T18:59:16.000Z (2 months ago)
- Last Synced: 2025-08-06T20:21:24.096Z (2 months ago)
- Topics: dialog, drawer, nextjs, radix-ui, react, shadcn, shadcnui
- Language: TypeScript
- Homepage: https://revola.sameerjs.com
- Size: 3.14 MB
- Stars: 26
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Revola
One component. Modal on desktop, Drawer on mobile.
A responsive dialog component that automatically adapts between drawer (mobile) and modal (desktop) modes.
Revola can replace your dialog, drawer, and alert dialog components with a single and simple solution.
## Features
- **Responsive by default** - Modal on desktop, drawer on mobile
- **Replaces multiple components** - Dialog, drawer, and alert dialog in one
- **Built on proven foundations** - Combines Radix UI Dialog and Vaul
- **Accessible** - ARIA compliant with keyboard navigation
- **Customizable** - Extensive API with snap points, directions, and styling options
- **TypeScript** - Full type safety out of the box
## Installation
```bash
npx shadcn@latest add https://revola.sameerjs.com/r/revola.json
```
## Usage
```tsx
import { Button } from "@/components/ui/button";
import {
ResponsiveDialog,
ResponsiveDialogContent,
ResponsiveDialogDescription,
ResponsiveDialogHeader,
ResponsiveDialogTitle,
ResponsiveDialogTrigger,
} from "@/components/ui/revola";
export function Example() {
return (
Open Revola
Welcome
This is a responsive modal that adapts between drawer & modal.
);
}
```
## Documentation
Visit [Docs](https://revola.sameerjs.com/docs) for full documentation, examples, and API reference.
## Credits
Built on top of:
- [Radix UI Dialog](https://radix-ui.com/primitives/docs/components/dialog) by [Radix UI](https://radix-ui.com)
- [Vaul](https://vaul.emilkowal.ski) by [Emil Kowalski](https://github.com/emilkowalski)
## License
MIT