Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

`PricingPlan`: Add support for additional `features` properties

Open
  • Is something wrong?
#7,179 0 comments 1 reaction 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
30/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Active
Tech stack
nuxt, tailwindcss, typescript
Domain
frontend

Research direction

Start from the features prop of the PricingPlan component, as documented at ui.nuxt.com/docs/components/pricing-plan, and see how it currently renders only a title and an icon. The issue proposes three open additions: a tooltip on the title, an icon color override, and label and separator item types with nested arrays. Several of these need design decisions first, such as the tooltip trigger and the type shape, so confirm the approach with maintainers before coding. Done means the proposed options are agreed, implemented and documented.

Written by the indexing model from the issue text.

Description

triage
Package

v4.x

Description

pricing-plan#features

Currently, features only supports title and icon. Could add the following properties:

  • Tooltip: The entire title could act as the tooltip trigger, with an underline to indicate that a tooltip is available. Alternatively, could use a small info-circle icon at the end of the title as the trigger. Underlining the title seems like the better option.
  • Icon color: Icons currently use text-primary by default. However, text-muted or text-error might be more appropriate for features that are unavailable in the Free plan but included in the Pro plan.
  • Type: Support for labels and separators, similar to the select component. For separators, could also use nested arrays, as in the select component.
const plans = [
    {
        title: "Free",
        price: "$25",
        features: [
            // Nested arrays to create separators, similar to select component
            [
                {
                    title: "Free Features",
                    type: "label", // Label for a group of features, similar to select component
                },
                {
                    title: "5 Projects",
                    color: "text-muted", // Muted color for miss-out features (paid plan has unlimited projects)
                },
                {
                    title: "Limited Platforms",
                    color: "text-muted",
                    tooltip: "Desktop only. Android & iOS not included.", // Additional details
                },
            ],
            [
                {
                    title: "Common Features",
                    type: "label",
                },
                {
                    title: "Common features",
                },
            ],
        ],
    },
];
Additional context

No response

Dominant language
TypeScript
Stars
7k
Forks
1.1k
Avg merge
1d 16h
Merged PRs (30d)
166

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from nuxt/ui

All issues in nuxt/ui

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.