Dynamic Text
Text content that self adjust to available width, no javascript, pure css! Features responsive typography, automatic scaling, and optimized text rendering for different screen sizes.
Dynamic Text
Other Examples
The text wrap wrapper let browser dynamically adjust the content without any javascript!
Date and Time Formats
Re-distribute the width with the handle in the middle to give more space for the date or the time.
Country Name Variations
Different ways to refer to the United Kingdom, from shortest to most formal naming conventions.
Currency Formats
Various ways to format currency values, from full text representation to compact notations.
Install
Requires a project with shadcn/ui initialized. Installs all 1 file and any listed registry dependencies.
npx shadcn@latest add https://manglekuo.com/showcase/r/dynamic-text.jsonRegistry deps: slider, label
Documentation
Dynamic Text
Text that self-adjusts to available width with pure CSS — no JavaScript for the core switching behaviour.
Usage
import { DynamicText } from '@/components/ui/dynamic-text'; <DynamicText content={{ stages: [ { text: "Short" }, { text: "Medium length" }, { text: "This is a longer text for wider containers" }, ], }}/>Language: jsxProps
content({ stages: Stage[] }, required): Text variations from longest to shortest fit.enableAutoSortForMonoFont(boolean, default:false): Auto-sort stages by length for monospace fonts.className(string, optional): Additional CSS classes.showDebug(boolean, default:false): Show debug overlay (useDynamicTextWrapperin demos).
Each stage: { text: string; color?: string }.
How it works
Container-query-driven CSS shows the longest stage that fits. Optional debug mode visualises breakpoints. DynamicTextWrapper adds a resizable panel for showcase-style demos.