shadcn_ui-badge

Render primary, secondary, destructive, and outline badges in Flutter with shadcn_ui.

8|Updated Mar 7, 2026
One-click install
npx skills add https://github.com/serverpod/skills-registry --skill shadcn-ui-badge
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: shadcn_ui-badge
Source: https://github.com/serverpod/skills-registry/tree/main/skills/shadcn_ui/shadcn_ui-badge
Command: npx skills add https://github.com/serverpod/skills-registry --skill shadcn-ui-badge

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a way to display badges or status indicators within a Flutter shadcn_ui application, enhancing the visual presentation of information like tags, counts, or states.

Core Features & Use Cases

  • Badge Display: Renders badges with customizable visual styles.
  • Variant Support: Includes primary, secondary, destructive, and outline variants for different semantic meanings.
  • Use Case: Use this Skill to show the number of unread messages as a red badge next to a user's name, or to display different colored badges for item statuses like 'New', 'In Progress', or 'Completed'.

Quick Start

Use the shadcn_ui-badge skill to display a destructive badge with the text 'Error'.

Frequently Asked Questions about shadcn_ui-badge

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I display status badges in a Flutter app?

To display status badges in a Flutter app, use the ShadBadge component from the shadcn_ui package to render tags, status labels, or count indicators with customizable visual styles.

What badge variants are available for shadcn_ui in Flutter?

Shadcn_ui badges in Flutter support primary, secondary, destructive, and outline variants, allowing you to apply different semantic meanings to status indicators like 'New', 'In Progress', or 'Error'.

How do I show a count indicator for unread messages in Flutter?

You can show a count indicator for unread messages in Flutter by rendering a ShadBadge, utilizing the destructive variant to display a red badge next to items like a user's name.

Do I need the shadcn_ui package to use ShadBadge?

Yes, you need to integrate the shadcn_ui Flutter package into your project, as ShadBadge requires this underlying package for rendering the visual badge components within your application.

Can I use outline badges for item tags in Flutter?

Yes, you can use the outline badge variant provided by ShadBadge to display item tags for statuses like 'Completed', rendering distinct visual styles within your Flutter application.