Skills
.Work. You
Rest

flowglad-pricing-ui

Official

Create pricing pages and plans with Flowglad.

Product & Management#pricing#react#billing#subscription#pricing-ui#flowglad
Authorflowglad
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps teams quickly build and maintain user-facing pricing interfaces for Flowglad subscriptions, reducing manual UI wiring and ensuring consistent pricing presentation across marketing and product experiences.

Core Features & Use Cases

  • Pricing data rendering: Display products, prices, intervals, and features in responsive cards.
  • State handling: Manage loading, empty, and error states for pricing data.
  • Current plan awareness: Highlight the user's active plan and disable upgrade actions accordingly.
  • Interval toggles: Allow users to switch between monthly and annual pricing and reflect correct prices.
  • Transform utilities: Convert raw pricing data into UI-ready plans with displayPrice, slug, and features.

Use case: Marketing pages show a pricing grid to compare plans, while product dashboards validate plan configurations.

Quick Start

Install and wire up the pricing UI in your Flowglad app, then fetch pricingModel data and render pricing cards using the provided helpers.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: flowglad-pricing-ui
Download link: https://github.com/flowglad/skills/archive/main.zip#flowglad-pricing-ui

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.