Beta
  • Components
  • Documentation
Loading...
Documentation
Components
  1. Documentation
  3. Quick start guide

Quick Start Guide

Your First Component in 5 Minutes

Let's configure and export your first Propify component. We'll use a pricing section as an example.

Step 1: Choose a Component

Browse our component library and select the component that fits your needs. For this example, we'll use the Pricing Cards with Billing Toggle.

Step 2: Configure Visually

Use the visual configurator to customize:

  • Plan names and pricing
  • Feature lists with tooltips
  • Button styles and CTAs
  • Popular plan highlighting
  • Yearly discount percentage

[Image placeholder: Screenshot of the visual configurator interface with a pricing component being edited]

Step 3: Preview in Real-Time

As you make changes, the preview updates instantly. Test different configurations:

  • Toggle between monthly/yearly billing
  • See how tooltips appear on hover
  • Check mobile responsiveness
Beta

Propify delivers premium components for modern marketing sites

© Copyright 2025 Propify. All Rights Reserved.

Legal
  • Terms of Service
  • Privacy Policy
  • Refund Policy
  • Cookie Policy
  • Verify the popular plan badge placement

    • Step 4: Export Your Code

    Once you're happy with the configuration, export the complete package:

    Component Code (Pricing05.tsx):

    ReactPricing05.tsx
    'use client';import { ArrowUpRight, CircleCheck, CircleHelp } from 'lucide-react';import React, { useState } from 'react';// ... component implementation

    Usage Example:

    <Pricing05  title="Pricing"  yearlyDiscount={20}  plans={plans}  LinkComponent={Link}/>

    Sanity Schema (pricing05Module.ts):

    TypeScriptpricing05Module.ts
    import { defineField, defineType } from 'sanity'export const pricing05Module = defineType({  name: 'module.pricing05',  title: 'Pricing Cards with Billing Toggle',  // ... schema definition})

    Step 5: Integrate Into Your Project

    1. Copy the component code to your project
    2. Install any required dependencies
    3. Add the Sanity schema to your studio
    4. Use the component with your configured props

    That's it! You've just saved 30-60 minutes of manual customization time.