React components: quick start
Start with free VFX UI React components. Choose a hero, background or footer, install editable source with shadcn, and use it in React or Next.js.
VFX UI is a library of editable React components: heroes, footers, backgrounds, interactions and page sections. The free library uses the MIT license and does not require an account.
1. Choose a component
Browse the component library and open a component you like. Its page has a live preview, settings, installation instructions and a usage example.
For a first project, try Hero Contour. It uses SVG and works without WebGPU.
Choose a section for the page you are building:
- React hero sections for the opening headline and call to action.
- Animated React backgrounds for gradients, particles and shader effects.
- React footer components for navigation and closing content.
- Landing page blocks for features, pricing, testimonials and contact sections.
- Interactive cards and hover effects for pointer feedback.
- Animated text and glass effects for smaller visual details.
2. Add it to your project
Copy the component into your project with the shadcn registry. You can edit the source directly, and no account is required.
Follow the installation guide for the command and a complete example.
3. Make it yours
Replace the example text and links, then adjust the component's props to fit your page. The component detail page is the reference for its props and examples.
Before publishing, check the layout on a narrow screen, navigate with a keyboard and test reduced motion. GPU effects also need a fallback for unsupported devices.
Find the right guide
The free library can be browsed and installed without an account. Explore the React UI guides for examples and implementation choices.