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.