Petal is a framework built on top of Phoenix and Elixir that helps developers rapidly build web applications. It consists of two main offerings:
Petal Components: 100+ beautifully hand-crafted open source HEEX components styled with Tailwind CSS.
Petal Pro: A feature-rich Phoenix boilerplate that jumpstarts your next project with all the essential functionality already implemented.
Why Choose Petal?
We're all creating the same code over and over again in our own silos. Every new project requires boilerplate code: buttons, forms, auth, emails and so on. Petal identifies code common in all projects and builds one perfect version of it, saving you time and money on every new project.
Key Features
Beautiful Components: 100+ HEEX components styled with Tailwind CSS
Authentication: Pre-built auth pages styled with Petal components
Social Login: Google & Github integration with easy addition of more providers
Multi-tenancy: Organization management with member invitations
Admin Dashboard: With charts, graphs, user management and logs
Stripe Billing: Integrated payment processing for subscriptions
AI Chatbot: Powered by langchain
Deployment: Ready for fly.io with properly configured dockerfile
Email Templates: HTML email template viewer and editor
SAAS Starter Kit built for Elixir and Phoenix LiveView
Elixir
Tailwind CSS
PostgreSQL
Stripe
Phoenix
Features:
Auth
CI/CD
Docs
i18n
Multi-Tenancy
OAuth
Testing
+1 more
Frequently Asked Questions
Elixir
What makes Elixir ideal for SaaS development?
Elixir excels in SaaS development due to its robust ecosystem, strong typing capabilities, and excellent library support. Elixir boilerplates leverage language-specific features to provide type-safe database queries, efficient API routing, and optimized runtime performance. The language's maturity means you get battle-tested packages for authentication, payment processing, and background jobs that integrate seamlessly.
LiveView
What LiveView-specific architecture patterns are implemented?
LiveView boilerplates leverage the framework's native architecture patterns including its routing system, middleware pipeline, and controller/handler structure. They implement LiveView's conventions for separating concerns, dependency injection, and service layer patterns. The codebase follows LiveView's best practices for organizing models, views/components, and business logic to ensure maintainability as your application grows.
Phoenix
What Phoenix-specific architecture patterns are implemented?
Phoenix boilerplates leverage the framework's native architecture patterns including its routing system, middleware pipeline, and controller/handler structure. They implement Phoenix's conventions for separating concerns, dependency injection, and service layer patterns. The codebase follows Phoenix's best practices for organizing models, views/components, and business logic to ensure maintainability as your application grows.
HEEX
What HEEX-specific component architecture is used?
HEEX boilerplates follow the framework's component composition patterns with reusable, atomic design components. They implement HEEX's best practices for component structure, props handling, event management, and lifecycle methods. The component library includes authentication flows, dashboards, data tables, forms with validation, and navigation—all built with HEEX's native features like hooks (React), composition API (Vue), or directives (Angular).
Tailwind CSS
What Tailwind CSS-specific component architecture is used?
Tailwind CSS boilerplates follow the framework's component composition patterns with reusable, atomic design components. They implement Tailwind CSS's best practices for component structure, props handling, event management, and lifecycle methods. The component library includes authentication flows, dashboards, data tables, forms with validation, and navigation—all built with Tailwind CSS's native features like hooks (React), composition API (Vue), or directives (Angular).
Stripe
What Stripe API features are implemented?
Stripe boilerplates implement the provider's complete API suite including checkout sessions, subscription lifecycle management, customer portal, webhook event handling, and invoice generation. They use Stripe's latest API version with proper error handling, idempotency keys, and retry logic. The integration includes Stripe-specific features like payment intents, setup intents, subscription schedules, and tax calculation APIs.
Elixir
What Elixir-specific tools and libraries are included?
Elixir boilerplates include the language's most popular and production-proven tools. This typically includes testing frameworks, linters, formatters, build tools, and package managers specific to Elixir. You'll get pre-configured toolchains that enforce best practices, automated testing pipelines, and development environments optimized for Elixir development workflows.
LiveView
How does LiveView's ORM/database layer work in these boilerplates?
LiveView boilerplates use the framework's native ORM or query builder (Prisma, Eloquent, Active Record, SQLAlchemy, etc.) with pre-configured models for users, subscriptions, teams, and common SaaS entities. They include optimized queries, relationships, migrations, seeders, and database connection pooling. The implementation leverages LiveView's specific features like eager loading, query scopes, and transaction handling for performance.
Phoenix
How does Phoenix's ORM/database layer work in these boilerplates?
Phoenix boilerplates use the framework's native ORM or query builder (Prisma, Eloquent, Active Record, SQLAlchemy, etc.) with pre-configured models for users, subscriptions, teams, and common SaaS entities. They include optimized queries, relationships, migrations, seeders, and database connection pooling. The implementation leverages Phoenix's specific features like eager loading, query scopes, and transaction handling for performance.
HEEX
How is state management handled in HEEX boilerplates?
HEEX boilerplates use the framework's recommended state management approach—whether that's React Context + hooks, Redux Toolkit, Zustand, Pinia (Vue), NgRx (Angular), or Svelte stores. They include pre-configured state slices for authentication, user data, subscriptions, and UI state with proper TypeScript typing. The implementation follows HEEX's patterns for global state, local component state, and server state synchronization.
Tailwind CSS
How is state management handled in Tailwind CSS boilerplates?
Tailwind CSS boilerplates use the framework's recommended state management approach—whether that's React Context + hooks, Redux Toolkit, Zustand, Pinia (Vue), NgRx (Angular), or Svelte stores. They include pre-configured state slices for authentication, user data, subscriptions, and UI state with proper TypeScript typing. The implementation follows Tailwind CSS's patterns for global state, local component state, and server state synchronization.
Stripe
How are Stripe webhooks handled securely?
Stripe webhooks are verified using the provider's signature validation to prevent spoofing attacks. The boilerplate includes webhook endpoints with proper Stripe signature verification, event type filtering, and idempotent event processing to handle duplicate deliveries. Events are processed asynchronously with retry logic, and the implementation handles Stripe's specific webhook events like subscription updates, payment failures, and customer changes.
