CompositionAvailable
Vocabulary Card
A word with optional pronunciation, contextual meaning and word class.
Installation
Add the component and its dependencies from the registry running on your computer.
terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/vocabulary-card.jsonUsage
Import the component into your project and keep the source code under your control.
tsx
import { VocabularyCard } from "@/components/ui/vocabulary-card";
export default function Demo() {
return <VocabularyCard word="morning" ipa="ˈmɔːrnɪŋ" meaning="mañana" category="noun" lang="en" />;
}
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 |
|---|---|---|---|
| word | string | See example | Word to display. |
| ipa / meaning / category | string | See example | Optional authored linguistic metadata. |
| punctuation / lang | string | See example | Optional punctuation and language of the word. |
| tone | GrammarTone | From category or group label | Optional color override. Spanish/English authored categories map to consistent light/dark colors; unknown categories remain neutral. |
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.