Forms
Form dialog examples from Origin UI with Revola, showcasing authentication, feedback, payment, and user profile patterns.
Revola handles form dialogs seamlessly across mobile and desktop, adapting from drawer to modal while maintaining excellent user experience for form interactions.
Mobile Forms Tip: When using forms with inputs, add overflow-y-auto to the wrapping div. This ensures content remains scrollable when the mobile keyboard appears, keeping all form elements accessible.
Authentication
User authentication flows including sign up, sign in, and verification patterns.
Sign Up
A user registration form with name, email, and password inputs for creating new accounts.
npx shadcn@latest add https://revola.sameerjs.com/r/sign-up.jsonSign In
A user login form with email, password, and remember me functionality for returning users.
npx shadcn@latest add https://revola.sameerjs.com/r/sign-in.jsonOTP Code
A verification form with OTP input for two-factor authentication and account verification.
npx shadcn@latest add https://revola.sameerjs.com/r/otp-code.jsonFeedback
A simple feedback form with textarea for collecting user comments and suggestions.
npx shadcn@latest add https://revola.sameerjs.com/r/feedback.jsonNewsletter
A newsletter subscription form with email input for building mailing lists.
npx shadcn@latest add https://revola.sameerjs.com/r/newsletter.jsonRating
A rating form with radio buttons and optional feedback for collecting user ratings.
npx shadcn@latest add https://revola.sameerjs.com/r/rating.jsonManagement
Invite Members
A team member invitation dialog with multiple email inputs and magic link sharing functionality for growing your team.
npx shadcn@latest add https://revola.sameerjs.com/r/invite-members.jsonPayment
Payment processing forms for checkout flows and card management.
Checkout
A comprehensive checkout form with plan selection and payment card inputs for purchases.
npx shadcn@latest add https://revola.sameerjs.com/r/checkout.jsonCredit Card
A payment card update form with card details and billing information inputs.
npx shadcn@latest add https://revola.sameerjs.com/r/credit-card.jsonUser Profile
User account management forms for profile updates and subscription changes.
Change Plan
A subscription plan selection form with radio buttons for upgrading or changing plans.
npx shadcn@latest add https://revola.sameerjs.com/r/change-plan.jsonEdit Profile
A profile editing form with file upload and various inputs for updating user information.
npx shadcn@latest add https://revola.sameerjs.com/r/edit-profile.jsonSearch Command
A search command with a search input and a list of search results.
npx shadcn@latest add https://revola.sameerjs.com/r/search-command.json