Internet lost. Attempting reconnection...
Petal Petal
Petal
1k
Sign in
Components
All components
News
  • Pro
    • Pro
    • Membership
    • Releases
    • Roadmap
    • Generators
    • Getting Started
    • What is Petal Pro?
    • Changelog
    • Upgrade Guide
    • Recipes
    • Installation
    • Folder Structure
    • Guides
    • Web App From Start to Finish
    • Deploy to Fly.io
    • Adding a Subscription
    • Metered Usage
    • Creating Your Own API
    • Content Editor Plugin
    • Core Features
    • Users & Authentication
    • Passkeys
    • Organizations & Multitenancy
    • Stripe Billing
    • Notifications
    • Emails
    • Blog & CMS
    • Image Uploads
    • Included Pages
    • UI & Customization
    • Customization Recipes
    • Components
    • Branding
    • Dark Mode
    • Layouts & Menus
    • Generators
    • JavaScript Hooks
    • Translations
    • Admin & Monitoring
    • Impersonation
    • AI & Developer Tooling
    • Admin MCP Server
    • Claude Code Integration
    • Feedback & Analytics
    • Changelog System
    • Going to Production
    • Deployment
    • Background Tasks & Jobs
    • Seeding
    • Testing
    • REST API
    • GDPR
  • Components
    • Getting Started
    • About Petal Components
    • All components
    • Install
    • Petal Design
    • Roadmap
    • Theming
    • Typeset
    • UI Components
    • Accordion
    • Alert dialog
    • Alerts
    • Avatars
    • Badges
    • Breadcrumbs
    • Button Group
    • Buttons
    • Calendar
    • Card
    • Carousel
    • Charts
    • Chat (AI)
    • Combobox
    • Collapsible
    • Color scheme switch
    • Command
    • Containers
    • Flash Pro Currently only available to Petal Pro members
    • Floating div Pro Currently only available to Petal Pro members
    • Content Editor Pro Currently only available to Petal Pro members
    • Context menu
    • Data Table
    • Date picker
    • Dropdowns
    • Empty state
    • File upload
    • Filters
    • Forms
    • Heroicons
    • Hover card
    • Input Group
    • Input OTP
    • Kbd
    • Language select
    • Layouts Pro Currently only available to Petal Pro members
    • Links
    • Loading
    • Local time
    • Marquee
    • Menus
    • Modals
    • Navigation Menu
    • Number field
    • Pagination
    • Popover
    • Progress
    • QR code
    • Rating
    • Resizable
    • Scroll area
    • Scrollspy
    • Separator
    • Sidebar
    • Skeleton
    • Slide Over
    • Slider
    • Social Button
    • Sortable
    • Stepper
    • Table
    • Tabs
    • Timeline
    • Toast
    • Toggle Group
    • Tooltip
    • Tree
    • Typography
    • Marketing Components
    • Aurora
    • Border Beam
    • Border plasma
    • Confetti
    • Meteors
    • Number Ticker
    • Shine Border
    • Spotlight Card
    • Text Animation
  • Recipes
    • Overview
    • All recipes
    • AI
    • AI Prompt
    • Streaming Chat
    • Tool Calling
    • Structured Output
    • Cost Tracking
    • Background Jobs
    • Provider Fallback
    • MCP Server
    • UI
    • Forms
  • Blog
  • Showcase
  • Changelog
  • Feedback

Every component in the library

213 components, documented on 77 pages (4 of them come with Petal Pro). Every name goes to the page with the live examples.

/

UI Components

  • Accordion
  • Alert dialog
  • Alerts
  • Avatars
  • Badges
  • Breadcrumbs
  • Button Group
  • Buttons
  • Calendar
  • Card
  • Carousel
  • Charts
  • Chat (AI)
  • Collapsible
  • Color scheme switch
  • Combobox
  • Command
  • Containers
  • Content Editor Pro
  • Context menu
  • Data Table
  • Date picker
  • Dropdowns
  • Empty state
  • File upload
  • Filters
  • Flash Pro
  • Floating div Pro
  • Forms
  • Heroicons
  • Hover card
  • Input Group
  • Input OTP
  • Kbd
  • Language select
  • Layouts Pro
  • Links
  • Loading
  • Local time
  • Marquee
  • Menus
  • Modals
  • Navigation Menu
  • Number field
  • Pagination
  • Popover
  • Progress
  • QR code
  • Rating
  • Resizable
  • Scroll area
  • Scrollspy
  • Separator
  • Sidebar
  • Skeleton
  • Slide Over
  • Slider
  • Social Button
  • Sortable
  • Stepper
  • Table
  • Tabs
  • Timeline
  • Toast
  • Toggle Group
  • Tooltip
  • Tree
  • Typography

Marketing Components

  • Aurora
  • Border Beam
  • Border plasma
  • Confetti
  • Meteors
  • Number Ticker
  • Shine Border
  • Spotlight Card
  • Text Animation

Also in the package

Shipped, with no page of its own here yet. The reference is on hexdocs.

  • user_dropdown_menu

Copyright © 2026 Everfree Pty Ltd.

Privacy Policy

No results found.
Pro
Membership Releases Roadmap Generators What is Petal Pro? Changelog Upgrade Guide Recipes Installation Folder Structure Users & Authentication Passkeys Organizations & Multitenancy Stripe Billing Notifications Emails Blog & CMS Image Uploads Included Pages Customization Recipes Components Branding Dark Mode Layouts & Menus Generators JavaScript Hooks Translations Impersonation AI & Developer Tooling Admin MCP Server Claude Code Integration Feedback & Analytics Changelog System Deployment Background Tasks & Jobs Seeding Testing REST API GDPR Web App From Start to Finish Deploy to Fly.io Adding a Subscription Metered Usage Creating Your Own API Content Editor Plugin
Components
About Petal Components All components Install Petal Design Roadmap Aurora Accordion Alert dialog Alerts Avatars Badges Breadcrumbs Border Beam Border plasma Button Group Confetti Buttons Calendar Card Carousel Charts Chat (AI) Combobox Collapsible Color scheme switch Command Containers Flash Floating div Content Editor Context menu Data Table Date picker Dropdowns Empty state File upload Filters Forms Heroicons Meteors Hover card Input Group Number Ticker Input OTP Kbd Language select Shine Border Layouts Links Loading Local time Marquee Spotlight Card Menus Modals Text Animation Navigation Menu Number field Pagination Popover Progress QR code Rating Resizable Scroll area Scrollspy Separator Sidebar Skeleton Slide Over Slider Social Button Sortable Stepper Table Tabs Timeline Toast Toggle Group Tooltip Tree Typography Theming Typeset
Recipes
All recipes Forms AI Prompt Streaming Chat Tool Calling Structured Output Cost Tracking Background Jobs Provider Fallback MCP Server
Blog
Showcase
Changelog
Feedback