Dev Design LibraryBadge Components
Dev Design Library indexes 253 badge components from 67 open-source UI libraries, with the most coming from Watermelon UI, ReUI, Shadcn Space, Tremor Blocks and Origin UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Badge components belong to the Feedback group.
Showing 120 of 253, a mix from every library. Open a library to see all of its components.
Badgeshadcn/ui · ReactDisplays a badge or a component that looks like a badge.
BadgeMUI / Material UI · React
BadgedaisyUI · CSS (Tailwind)
BadgeChakra UI · ReactUsed to highlight an item's status for quick recognition.
BadgeHeroUI · ReactDisplays a small indicator positioned relative to another element, commonly used for notification counts, status dots…
LabelHeadless UI · React
BadgeReact Spectrum · ReactBadges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.
Badgecoss ui · ReactA badge or a component that looks like a badge.
BadgeOrigin UI · ReactA badge or a component that looks like a badge.
BadgeRadix Themes · React
Halo BadgeCult UI · ReactBadge with optional layout animation, live status dot, and gradient rim aligned with Halo Button / Card
Notification Badgetransitions.dev · HTML/CSS
BadgeTremor · React
BadgeReUI · ReactBadges are used to highlight items, notify users, or display statuses.
Badgepdfcn · ReactBadge PDF component (forme)
BadgePark UI · ReactA component for displaying small labels and status indicators.
BadgeLobe UI · React
Save StatusKokonut UI · React"An autosave pill for editors that says Editing, Saving or Saved, counts changes while offline, and syncs them when…
badgeIntent UI · Reactbadge
BadgesUntitled UI React · React
Animated BadgebeUI · ReactStatus badge with animated state icons, pulse feedback and compact size variants.
BadgeTailGrids · ReactBadge component with multiple colors, sizes, and support for prefix/suffix icons.
Notification BellRare UI · ReactAn iOS-style notification bell with an unread count badge.
Event Badge 3DSpectrum UI · Reactcomponent for the Event Badge 3D
BadgeSpell UI · ReactA badge component with multiple color variants and sizes.
BadgeVengeance UI · React
BadgeFluid Functionalism · ReactCompact label with solid, dot, and ghost variants, Tailwind color palette, and three sizes.
BadgeToolcraft · React
BadgeLaunch UI · React
Animated BadgePanel UI · React NativeStatus pill whose icon and label roll over when the status changes.
Avatar-03 - BadgeShadcn Space · ReactBadge avatar component
Notification DropdownOpenSourceUI · React
Badge CounterKinetics · HTML/CSSCount springs on every add
AnnouncementBoardUI · ReactDismissible banner for product news.
Coss BadgeComponentry · React
BadgeTremor Blocks · React
BadgeShadcn Dashboard · React
Spell BadgeAnimations (Svelte) · Svelte
BadgeObsidianUI · React
Badges 04Oxbow UI · AstroLeft and right badge
BadgeNexvyn UI · ReactA compact status label with solid, muted, and dot variants for tagging content inline.
badgeBaseLayer · ReactA badge is a small label that can be used to display information or status.
BadgeShark UI · ReactA badge or an element styled as a badge.
Announcement 1Watermelon UI · React
BadgeArc Library · ReactA small label for status, category, or metadata.
Glass Badgeglasscn · ReactGlass Badge with five variants: clear, frosted, subtle, liquid, and liquid-refract
Availability BadgeUI Lab · ReactShows when the owner is working, and when that overlaps with your day.
BadgeHextaUI · ReactStatus labels with colored dots, removable tags that slide closed and counts that roll to their new value.
Language Detector BlockLocalMode · ReactDebounced (400 ms) automatic language detection across 110 languages (up to five candidates with name + ISO code +…
BadgeCojeev UI · ReactStamp a review state, attach a filing tag or count a collection. Three compact treatments with one clear meaning in…
Sliding Arrow LabelMicroKit · ReactA text label that gets a bright surface while an arrow slides in beside it.
BadgeROI UI · ReactA small count and labeling component.
BasicFLX UI · ReactA single default badge.
Aisuggestion BadgeHalaska UI · React
Message Notificationsv-particles · Svelte
LabelMetal UI · React + SwiftUIText in a set role: engraved, small, title, heading, query, count, cell, value, display, readout, on-graphite and…
BadgeSpaceUI · ReactDisplays small colored label tags for status flags, counts, or categories, helping users quickly scan and spot key…
Aria BadgeReScript shadcn · ReScript
BadgeOUI · ReactA className function to style a react aria component as a shadcn Badge
Liquid BadgeLiquefy UI · ReactBadge in liquid glass style. Selo em estilo vidro líquido.
BadgeD2Studio UI · ReactDisplays a badge or a component that looks like a badge.
BadgeEaseUI · ReactSmall status pill in five colors, with a crossfade for when its variant changes.
Glass BadgeOpaline · ReactSmall glass chip with an optional glowing status dot.
BadgeFibo · ReactA short label for status, category or count.
Badges KitReactFrame · ReactA status badge with 8 tone presets, light/dark variants, 3 sizes, 6 icon styles (check, cross, minus, dot, spinner…
Images BadgeAceternity UI · React
Badgeark-cn · ReactA shadcn-style badge component built with Ark UI primitives.
Form Control LabelMUI / Material UI · React
LabeldaisyUI · CSS (Tailwind)
StatusChakra UI · ReactUsed to indicate the status of a process or state
Notification BadgeReact Spectrum · ReactNotification badges are used to indicate new or pending activity .
Comp 413Origin UI · React
Neumorph EyebrowCult UI · ReactNeumorphic eyebrow component with soft shadow effects and modern styling
Pro Gradient Texttransitions.dev · HTML/CSS
LabelTremor · React
Default badgeReUI · ReactDefault badge
Badgepdfcn · ReactBadge PDF component (takumi)
Display ValuePark UI · ReactDisplay values with consistent fallback for empty values.
Base Ui BadgeLobe UI · React
Rating BadgeUntitled UI React · React
DescriptionTailGrids · ReactA description component that provides additional context or instructions for form fields.
Notification BellSpectrum UI · ReactA bell icon button with a ring-shake swing, springy unread badge with rolling odometer count, and a pinging dot mode
BadgePanel UI · React NativeCompact status label, dot, or notification count.
Badge-01 - DefaultShadcn Space · ReactBadge component
Pulse BadgeKinetics · HTML/CSSA notification dot emits expanding rings forever — pure CSS
BadgesBoardUI · React
Badge 01Tremor Blocks · React
LabelShadcn Dashboard · React
Badges 01Oxbow UI · Astro
StatusShark UI · ReactColor-coded status for process or state.
Announcement 2Watermelon UI · React
Liquid Badgeglasscn · ReactA liquid-glass badge wrapper that keeps the base badge fill and applies the effect to the border.
Badge CounterUI Lab · ReactRolls its digits the way the count moved and bumps each time it changes.
Format Detection BadgeLocalMode · ReactA small badge displaying an auto-detected data format (PINECONE / CHROMA / CSV / JSONL or custom) with a per-format…
VariantsFLX UI · ReactAll six variants side-by-side: default, secondary, destructive, outline, ghost, link.
BadgeHalaska UI · React
With Badgesv-particles · Svelte
Status badgeMetal UI · React + SwiftUIA readable 26pt status plate with words and a sunk LED or retained morphing meaning glyph. Quiet, opaque strong tint…
Badge SquircleSpaceUI · ReactTactile squircle badge components featuring dynamic curvature morphing on hover with polymorphic Base UI render support.
Base BadgeReScript shadcn · ReScript
ID CardD2Studio UI · ReactAn event badge on a D2 strap: a portrait, name, role and a short about, with contact links at the foot. The strap is a…
TagReactFrame · ReactA compact label tag with soft, solid and outline variants, 6 colors, 3 sizes, an optional pulsing dot, icon, count…
Form LabelMUI / Material UI · React
TagChakra UI · ReactUsed for categorizing or labeling content
Comp 414Origin UI · React
Info outline badgeReUI · ReactInfo outline badge
Dashboard Label With KeyLobe UI · React
Status BadgeSpectrum UI · Reactcomponent for the Status Badge
LabelPanel UI · React NativeForm field label with required, invalid and disabled states.
Badge-02 - CountShadcn Space · ReactBadge component
Status PillKinetics · HTML/CSSMorphs idle → loading → success with icon and colour
Badge 02Tremor Blocks · React
Badges 02Oxbow UI · Astro
Announcement 3Watermelon UI · React
Badgeglasscn · React
Notification BellUI Lab · ReactRings when something new arrives, and the badge rolls up with each one.
Cache BadgeLocalMode · ReactAnnotates a result as served from the semantic cache, optionally with the hit latency (e.g. "cached · 12ms"). Drive…
With iconFLX UI · ReactLeading verified icon before the label.
Confidence PatternHalaska UI · React
With Badge And Menusv-particles · Svelte
Libraries with badge components
Related categories
- React Badge Components
- Tailwind CSS Badge Components
- Svelte Badge Components
- Animated Badge Components
- shadcn/ui Badge Components
- Feedback Components
- Spinner Components
- Progress Components
- Alert Components
- Chip Components
- Progress Bar Components
- Empty State Components
- Notification Components
- Status Indicator Components
- Skeleton Components
- Banner Components
- Typing Indicator Components
- Progress Circle Components
- Error State Components
- Success Animation Components
- Scroll Progress Components