CompositionDisponible
Vocabulary Card
Una palabra con pronunciación, significado contextual y categoría opcionales.
Instalación
Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.
terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/vocabulary-card.jsonUso
Importa el componente en tu proyecto y conserva el código bajo tu 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" />;
}
Estados e interacción
Aspecto, comportamiento y comprobación con teclado.
- La composición hereda los estados de sus controles. Prueba valores vacíos, contenido, carga y error cuando correspondan a la aplicación.
- Los ejemplos de esta página son ejecutables; el código mostrado usa los mismos componentes. La lógica de negocio pertenece al consumidor.
- Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.
Referencia API
Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
| 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. |
Accesibilidad
Reglas que deben conservarse cuando el componente se adapte a un producto.
Traduce las etiquetas y conserva el foco visible de teclado.
El feedback incluye texto además de color. La validación y la persistencia pertenecen al consumidor.
El color acompaña la categoría o función escrita; el significado no depende solo del color.