Carregando…Carregando…Carregando…Carregando…Text truncator with expandable 'Read more / Read less' toggle.
Default (maxLength=150)
Kikito CN is a semantic design system built on top of Tailwind CSS v4, using CSS custom properties for theming and a token bridge that keeps the dashb…
Custom labels and shorter maxLength
Kikito CN is a semantic design system built on top of Tailwi…
$ npx kikitocn add read-moreimport { ReadMore } from "@/components/ui/cn/read-more/ReadMore";
export function ReadMoreExample() {
return (
<ReadMore>
Read More
</ReadMore>
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
children* | string | — | Texto completo |
maxLength | number | 150 | Caracteres visíveis antes do truncamento |
expandLabel | string | 'Read more' | Label para expandir |
collapseLabel | string | 'Show less' | Label para colapsar |
className | string | — | Classes CSS extras |
style | React.CSSProperties | — | Estilos inline extras |