Share Strip

Want this built into your product? AI agents write the code, an engineer directs them: https://vibecoding.tech/services?utm_source=21st&utm_medium=component Book a call and say promo code 21ST to get a free 3-day development trial. One hard-bordered 100% strip with in-segment labels for larger parts and a complete value-and-percent legend. Answers: "What makes up the whole, in one strip?"

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Share Strip to your project and fits it to your theme.

import { ShareStrip } from '@/components/ui/share-strip'

export default function ShareStripDemo() {
  return (
    <ShareStrip
      title="Language distribution"
      parts={[
        { label: 'Typescript', value: 35 },
        { label: 'Go', value: 34 },
        { label: 'Python', value: 34 },
        { label: 'Javascript', value: 5 },
        { label: 'Rust', value: 5 },
      ]}
    />
  )
}