Install the package along with FormEngine Core. Make sure you have Tailwind CSS configured in your project:
npm install @react-form-builder/core @react-form-builder/components-shadcn-ui
Open Source Lightweight React JSON Schema Form Library for shadcn/ui
Build elegant React forms with shadcn/ui components. FormEngine Core + shadcn/ui delivers beautiful, customizable forms built on Radix primitives and Tailwind CSS.
npm i @react-form-builder/core @react-form-builder/components-shadcn-ui
Why Choose FormEngine Core with shadcn/ui
Beautiful Design
shadcn/ui offers elegant, minimalist components that look great by default. Your forms will have a modern, polished appearance.
Copy-Paste Components
shadcn/ui components are meant to be copied into your project. You own the code and can customize anything.
Radix Primitives
Built on Radix UI, each component is accessible, unstyled at its core, and fully customizable.
Tailwind CSS
Style your forms with Tailwind CSS utility classes. Easy to customize colors, spacing, and responsive behavior.
Accessible by Default
Radix primitives handle accessibility. Your forms work with screen readers, keyboard navigation, and focus management.
TypeScript First
Full TypeScript support with proper types. Get autocomplete and catch errors in your IDE.
Dark Mode
shadcn/ui supports dark mode out of the box via CSS variables. Switch themes without extra configuration.
Form Validation
Built-in validation with shadcn-styled error messages. Consistent error presentation across all form components.
Highly Customizable
Since you own the component code, customize anything. Change animations, add new variants, or modify behavior.
FormEngine Core + shadcn/ui Power Combo
FormEngine Core with shadcn/ui enables developers to rapidly build complex dynamic forms while maintaining a beautiful, customizable design system. This combination minimizes boilerplate code, delivering seamless integration with the React ecosystem. No performance compromises — just clean, maintainable form code.
Lightning-Fast Integration
Native support for Next.js, Remix, and other React stacks with zero special setup; forms render from a single JSON file featuring conditional logic, multi-language support, and actions (submit, reset). Custom shadcn/ui components integrate effortlessly while preserving TypeScript typing and top-tier performance.
Minimal Bundle Size
FormEngine Core boasts a lightweight architecture (188.54KB gzipped), eliminating unnecessary dependencies with tree-shaking optimizations for shadcn/ui components. This accelerates page loads, making it perfect for high-traffic landing pages and PWAs.
Installation
Basic Usage
Here's an example of how to set up FormEngine with shadcn/ui components:
import {buildForm} from '@react-form-builder/core'
import {FormBuilder} from '@react-form-builder/designer'
import {builderView} from '@react-form-builder/components-shadcn-ui'
const simpleForm = buildForm({errorType: 'ShadcnErrorWrapper'})
.component('firstName', 'ShadcnInput')
.prop('placeholder', 'Enter your first name')
.prop('label', 'First Name')
.validation('required')
.component('lastName', 'ShadcnInput')
.prop('placeholder', 'Enter your last name')
.prop('label', 'Last Name')
.validation('required')
.component('submit', 'ShadcnButton')
.prop('children', 'Submit')
.prop('variant', 'default')
.event('onClick')
.commonAction('validate').args({failOnError: true})
.customAction('onSubmit')
.json()
export const BuilderApp = () => {
return <FormBuilder
view={builderView}
getForm={() => simpleForm}
actions={{
onSubmit: (e) => {
// submit the form to the backend
alert('Form data: ' + JSON.stringify(e.data))
},
}}
/>
}
Available Components
Documentation
For complete documentation and more examples, visit:
Support
Need help getting started? Check out our GitHub repository or contact our team for assistance.
FAQ
What shadcn/ui components are included?
The package includes Input, Textarea, Select, Checkbox, RadioGroup, Switch, Slider, DatePicker, Calendar, Combobox, and more form-related components.
Does it support dark mode?
Yes. shadcn/ui uses CSS variables for theming. Dark mode works automatically when you toggle the dark class on your root element.
Do I need Tailwind CSS?
Yes. shadcn/ui components are styled with Tailwind CSS. Make sure you have Tailwind configured in your project.
How do I handle form validation?
FormEngine's validation system integrates with shadcn/ui's form styling. Error messages appear with consistent styling using the FormMessage component pattern.
Can I customize the component styles?
Absolutely. shadcn/ui components use Tailwind classes and CSS variables. You can customize colors, spacing, and variants to match your design system.
Can I use custom shadcn/ui variants?
Yes. You can pass variant props through FormEngine. If you've created custom variants, they'll work as expected.
Star us on GitHubInstallation
Quick Start with shadcn/ui Components
Install the packages and start building forms with shadcn/ui components. Make sure you have Tailwind CSS configured in your project.
npm install @react-form-builder/core @react-form-builder/components-shadcn-ui
Need help with shadcn/ui integration?
Our team can help you get started with FormEngine and shadcn/ui.