Components Figma file

Figma file

Design your projects with our official Figma UI Kit

Speed up your design workflow with the official Petal UI Kit for Figma. This comprehensive design system includes all the components from Petal Components, allowing designers and developers to work seamlessly together.

Official Petal UI Kit

Free to use for personal and commercial projects. Includes buttons, forms, cards, navigation, and more.

Open in Figma

What's included

  • Complete component library - All Petal Components recreated in Figma with proper auto-layout and variants
  • Design tokens - Colors, typography, spacing, and shadows that match the Tailwind CSS configuration
  • Dark mode support - All components include both light and dark theme variants
  • Responsive layouts - Example layouts for desktop, tablet, and mobile views
  • Icon library - Heroicons integrated and ready to use

Perfect for

  • Designers creating mockups for Phoenix/LiveView projects
  • Teams that need design-to-code consistency
  • Rapid prototyping with production-ready components
  • Client presentations and stakeholder demos

Pro tip

Use the Figma file alongside the Petal Components documentation to ensure your designs translate perfectly to code. Component names and properties match between Figma and the code library.