Introduction

Hi, welcome to Propify! We're excited to help you build beautiful, configurable React components with real-time preview capabilities and ready-to-use Sanity CMS schemas.

Propify transforms how developers work with component libraries. Instead of copying static code and manually editing every detail, you can visually configure components, preview changes in real-time, and export production-ready code with your exact settings.

Let's get you started with creating your first configurable component.

What Makes Propify Different

Traditional component libraries give you static code blocks:

Copy the code
Open your IDE
Manually edit props
Save and refresh to see changes
Repeat until it looks right

Propify gives you a better workflow:

Configure components visually
See changes instantly in the preview
Export code with your exact configuration
Get matching Sanity CMS schemas included

Prerequisites

Before diving in, you'll need familiarity with:

and modern JavaScript/TypeScript

React

Tailwind CSS for styling

Shadcn UI component library

Sanity CMS (optional, but recommended for content management)

Don't worry if you're not an expert in all of these - we'll provide resources to get you up to speed.

What You'll Get

Each Propify component export includes:

React Component - The fully configured component code
Usage Example - How to implement it in your app
Sanity Schema - Complete CMS schema definition
TypeScript Types - Full type safety included

Here's a quick example of what you'll be working with:

// Your configured component<Pricing05  title="Pricing"  yearlyDiscount={20}  plans={configuredPlans}  LinkComponent={Link}/>

Ready to build something amazing? Let's dive into the Quick Start Guide.