Introducing Support for AI Models
Your company's headline right here
Add then a small bit of subtext, further detailing your company's offerings and what makes it different from the competition
✨ 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
Static design code for this component comes from Tailark, an open-source repo.
Controls
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.
Teams01.tsx
Full preview available
import React from 'react';
interface TeamMember {
name: string;
role: string;
avatar: string;
}
interface TeamSection {
title: string;
members: TeamMember[];
}
interface Teams01Props {
title?: string;
sections: TeamSection[];
}
export function Teams01({ title, sections }: Teams01Props) {
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={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, index) => (
<div key={index} 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.