Components
- Accordion
- AppShell
- Autocomplete
- Badge
- Blobatar
- BoringAvatar
- Button
- Calendar
- Checkbox
- DataGrid
- Date Picker
- Date Range Picker
- DateTime
- Dialog
- Drawer
- Dropdown
- Empty
- Error State
- Frame
- Input
- Input Amount
- Input Group
- Input OTP
- Input Password
- Input Phone
- Input Search
- Input Secret
- Loading
- PageContainer
- PageHeader
- Popover
- Select
- StatsCard
- Switch
- Tabs
- TextArea
- Toast
- Tooltip
Introduction
Explore React components, try them live, and make the source your own.
Vandor UI gives you React components you can try before adding them to your project. Explore the available options, copy a working example, and customize the installed source to match your interface.
What You Get
- Interactive previews: change props and see how a component looks and behaves before installing it.
- Working examples: copy usage code that matches your playground settings, or start from common patterns.
- Editable source: keep component code in your own project and change its styles or behavior without waiting for a library update.
- Clear references: find installation commands, dependencies, props, and accessibility guidance on each component page.
Try Your First Component
Start with the Button. Choose from six variants and eight sizes, adjust its press feedback, and copy the configuration you want.
When you are ready, add it to a project with shadcn configured:
$ pnpm dlx shadcn@latest add https://vandor-ui.vercel.app/r/button.json
Need help setting up your project? Follow the installation guide.
Make It Your Own
The installed component belongs in your codebase. Use its props for everyday changes, or edit the source when your design needs something different.
Browse all components to find your next starting point.