FeedbackAvailable
Combo Meter
Combo chip with a lightning, the multiplier and pips; its tone follows the same tiers as Reward Sticker.
Installation
Add the component and its dependencies from the registry running on your computer.
terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/combo-meter.jsonUsage
Import the component into your project and keep the source code under your control.
tsx
"use client";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { ComboMeter } from "@/components/ui/combo-meter";
export default function Demo() {
const [combo, setCombo] = useState(2);
return (
<div className="grid justify-items-start gap-6">
<div className="flex flex-wrap gap-3">
{[0, 1, 2, 3, 5].map((value) => <ComboMeter key={value} combo={value} />)}
</div>
<div className="flex flex-wrap items-center gap-3">
<ComboMeter combo={combo} />
<Button variant="outline" onClick={() => setCombo(combo + 1)}>Clean answer</Button>
<Button variant="ghost" onClick={() => setCombo(0)}>Miss</Button>
</div>
</div>
);
}
States & interaction
Appearance, behavior and keyboard checks.
- The composition inherits its controls’ states. Test empty, content, loading and error cases where the application needs them.
- Examples on this page are runnable; the displayed code uses the same components. Business logic belongs to the consumer.
- Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.
API Reference
BrutalLab-specific properties. Native attributes are supported as well.
| Prop | Type | Default | Description |
|---|---|---|---|
| combo | number | Required | Consecutive clean answers from the consumer; 0 shows a dash. |
| label / steps | string / number | "Combo" / 5 | Accessible name and pips until the top tier. |
Accessibility
Rules that should remain intact when adapting the component to a product.
The multiplier is text and the label is available to assistive technology; pips are decorative.
The value pop stops with reduced motion.