CompositionAvailable
Sentence Breakdown
Vocabulary cards grouped by their function in a sentence.
Installation
Add the component and its dependencies from the registry running on your computer.
terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/sentence-breakdown.jsonUsage
Import the component into your project and keep the source code under your control.
tsx
import { SentenceBreakdown } from "@/components/ui/sentence-breakdown";
export default function Demo() {
return <SentenceBreakdown lang="en" words={[
{ id: "i", text: "I", ipa: "aɪ", meaning: "yo", category: "pronoun" },
{ id: "drink", text: "drink", ipa: "drɪŋk", meaning: "bebo", category: "verb" },
{ id: "water", text: "water", ipa: "ˈwɔːtər", meaning: "agua", category: "noun" },
{ id: "every", text: "every", ipa: "ˈevri", meaning: "cada", category: "determiner" },
{ id: "day", text: "day", ipa: "deɪ", meaning: "día", category: "noun", punctuation: "." },
]} groups={[
{ id: "subject", label: "Subject", wordIds: ["i"] },
{ id: "verb", label: "Verb", wordIds: ["drink"] },
{ id: "object", label: "Object", wordIds: ["water"] },
{ id: "time", label: "Time", wordIds: ["every", "day"] },
]} />;
}
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 |
|---|---|---|---|
| words | Word[] | See example | Words with stable ids and optional card metadata. |
| groups | { id, label, wordIds }[] | See example | Optional grammatical grouping. Ungrouped words remain visible. |
| label / lang | string | See example | Accessible region name and language of the words. |
| groups[].tone | GrammarTone | From category or group label | Optional tone on each group; words keep their own category colors. A group function and a word class are different concepts. |
Accessibility
Rules that should remain intact when adapting the component to a product.
Provide localized labels and preserve visible keyboard focus.
Feedback includes text, not color alone. The consumer owns validation and persistence.
Color accompanies the written category or function; meaning never depends on color alone.