neal-react

neal-react is a React.js component library for assembling startup landing pages, providing pre-built React components that sit between high-level hosted tools like Launchrock and low-level CSS frameworks like Bootstrap.

What is neal-react?

neal-react is an open-source collection of React.js components that lets developers build landing pages by composing ready-made sections instead of writing HTML and CSS from scratch. It takes React components as input and produces a complete landing page UI, running in any React project bundled with webpack. The library is maintained by Denny Britz on GitHub, with a companion sample page repository (neal-sample) that demonstrates how to combine the components.

Key Features

• Pre-built landing page components — 16 components covering the typical sections of a startup landing page: App, Page, Section, Hero, HorizontalSplit, Navbar, Footer, PricingTable, CustomerQuotes, SignupInline, SignupModal, Countdown, Team, Figure, ImageList, and Code.
• Third-party integrations — GoogleAnalytics, Segment, Stripe, and Typeform components that collect analytics, payments, and user data without requiring a custom backend.
• Bootstrap v4 styling — Styles are based on Bootstrap v4 and Font Awesome, loaded via CDN, and can be customized by overriding SASS variables in the included _variables.scss file.
• Structor support — Works with Structor, a visual development environment for React UI, through a boilerplate project available on the Structor Marketplace and the neal-react-prepack repository.
• Static deployment to AWS — Since integrations handle user data, you can build the static public directory with webpack and upload it to an S3 bucket with static website hosting; the repo includes a bash script that runs webpack -p and then aws s3 cp.

Who is it for?

• Startup founders — put together a professional landing page with a hero, pricing table, signup form, and customer quotes without hiring a designer or writing custom CSS.
• Front-end developers — assemble components in JSX, customize colors and spacing through SASS variables, and avoid the boilerplate of building every section from scratch.
• Developers shipping static sites — use the Stripe and Typeform integration components to collect payments and leads, then deploy the generated public folder to S3 without maintaining a server.

What can you do with neal-react?

• SaaS product owners: create a launch page with a Hero, PricingTable, CustomerQuotes, and SignupInline to convert visitors into signups.
• Marketing teams: put a Countdown component on the page to create urgency for a product launch and attach a SignupModal to capture early email subscribers.
• Developers tracking performance: drop in the GoogleAnalytics and Segment components to monitor traffic and user behavior with just a few props.

How does neal-react work?

Install the package with npm install --save neal-react, import the components you need, and render them inside a top-level App component. The repo's sample page code (in the neal-sample repository) is the primary reference for composing layouts, and the required external dependencies (jQuery, Bootstrap v4 JavaScript, and Font Awesome) must be included from CDN links listed in the documentation.

FAQ

Does neal-react require other libraries?

Yes. Besides React, you need to load jQuery, Bootstrap v4 JavaScript, and Font Awesome from CDNs. The README provides the exact CDN URLs for these assets.

Can I customize the look of neal-react components?

Styling is based on Bootstrap v4 and can be overwritten by setting the appropriate SASS variables in the css/_variables.scss file, so you can change colors, spacing, and other theme values without editing the components.

Does neal-react include payment or form processing?

It includes Stripe and Typeform integration components, along with GoogleAnalytics and Segment. Because these handle user data externally, you don't need to write a backend to collect payments or leads.

How do I deploy a site built with neal-react?

The documentation describes a static deployment approach: run webpack to build assets and then copy the public directory to an AWS S3 bucket with Static Website Hosting enabled. A sample bash script in the repo automates both steps.