Beta
  • Components
  • Documentation
Sign InSign Up

✨ Now with Sanity CMS schemas

Stop configuring.
Start shipping.

The first visual configurator for React components. Build, preview, and export production-ready components in seconds—not hours.

No credit card required
Full code preview
Export in 1 click

Component

Responsive
Hero background
Introducing Support for AI Models

Your company's headline, hereYour company's headline, here

Add then a small bit of subtext, further detailing your company's offerings and what makes it different from the competitionAdd then a small bit of subtext, further detailing your company's offerings and what makes it different from the competition

Start BuildingRequest a Demo
Hero image

Static design code for this component comes from Tailark, an open-source repo.

Controls

Small text that appears above the headline

Main heading text

Supporting text that appears below the headline

Call-to-action buttons

2 itemsAt most 2 items allowed

Optional hero image that appears below the content

Background image that appears behind the hero content

Component libraries give you static code.We give you control.

The old way

Copy. Paste. Edit. Repeat. 😩

  • Static code blocks with no preview
  • 30-60 minutes of manual customization
  • No way to test variations quickly
CMS schemas? Write them yourself
The Propify way

Configure. Preview. Export. Ship. 🚀

  • Visual controls with instant preview
  • 2-minute configuration process
  • Test unlimited variations in real-time
  • Auto-generated Sanity CMS schemas

Everything you need to ship faster

Built for developers who value their time

Visual Configuration

Intuitive controls for every prop. See changes instantly as you configure.

Live Preview

Real-time preview at every breakpoint. No more guessing how it looks.

CMS Schemas Included

Auto-generated Sanity schemas. The only tool that gives you both.

Clean Code Export

Production-ready React components with TypeScript. Copy and ship.

Performance First

Optimized components built with best practices. Zero bloat.

Tailwind + Shadcn

Built on the stack you love. Seamless integration with your project.

CMS Superpower

The only component library that speaks CMS

See exactly what you're getting. Component code and CMS schemas, all before you pay.

TeamsCircles.tsx
Full preview available
import React from 'react';

interface TeamMember {
  name: string;
  role: string;
  avatar: string;
}

interface TeamSection {
  title: string;
  members: TeamMember[];
}

interface TeamsCirclesProps {
  title?: string;
  sections: TeamSection[];
}

export function TeamsCircles({ title, sections }: TeamsCirclesProps) {
  return (
    <section className="py-12 md:py-32">
      <div className="mx-auto max-w-3xl px-8 lg:px-0">
        <h2 className="mb-8 text-4xl font-bold md:mb-16 lg:text-5xl">
          {title}
        </h2>

        {sections.map((section, sectionIndex) => (
          <div
            key={`section-${sectionIndex}`}
            className={sectionIndex > 0 ? 'mt-6' : ''}
          >
            <h3 className="mb-6 text-lg font-medium">{section.title}</h3>
            <div
              data-rounded="full"
              className="grid grid-cols-2 gap-4 border-t py-6 md:grid-cols-4"
            >
              {section.members.map((member, memberIndex) => (
                <div
                  key={`member-${memberIndex}`}
                  className="flex flex-col items-center"
                >
                  <div className="bg-background size-20 rounded-full border p-0.5 shadow shadow-zinc-950/5">
                    <img
                      className="aspect-square rounded-full object-cover"
                      src={member.avatar}
                      alt={member.name}
                      height="460"
                      width="460"
                      loading="lazy"
                    />
                  </div>
                  <span className="mt-2 block text-sm">{member.name}</span>
                  <span className="text-muted-foreground block text-xs">
                    {member.role}
                  </span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

Ready to ship 10x faster?

Join developers who've discovered the better way to build components.

Beta

Propify delivers premium components for modern marketing sites

© Copyright 2026 Propify. All Rights Reserved.

Legal
  • Terms of Service
  • Privacy Policy
  • Refund Policy
  • Cookie Policy