Dev Design LibraryAnimated Code Block Components
Dev Design Library indexes 17 Animated code block components from 12 open-source UI libraries, with the most coming from ReUI, Cult UI, Magic UI, UI Lab and Rare UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. These are the code block components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Code block components belong to the Developer tools group.
Code SlotsReact Bits · ReactOne-time-code input where a hidden overlay input owns focus, paste and SMS autofill while each slot lands its digit on…
Code ComparisonMagic UI · ReactA component which compares two code snippets.
Code BlockCult UI · ReactA beautiful code block component with tabs, copy functionality, and smooth animations
Dark terminalReUI · ReactANSI-style colored terminal output built from plain lines.
AI Response Stream & Code BlockAmicro Micro Transitions · ReactTerminal-like AI code stream card featuring branch revision navigation, instant copy with tactile haptics, and…
AI Code RunKokonut UI · ReactThe assistant runs a short Python script in the reply. A marker steps down the lines, the output prints, and the chart…
Code BlockRare UI · ReactA clean code block that builds its entire theme from a single accent color. Pass code and a hex, it does the rest.
TerminalAnimations (Svelte) · SvelteA terminal-like UI component with typing animations, sequence control, and intersection observer support.
Scrambled Install CommandGreatUI · React
Code blockArc Library · ReactPresent code with legible hierarchy and copy access.
Code BlockUI Lab · ReactSwitch files with a sliding underline and copy with one click.
Code BlockReactFrame · ReactA syntax-highlighted code block with line numbers, per-line highlighting, a filename/language header, a copy button…
TerminalMagic UI · ReactA terminal component
Terminal AnimationCult UI · ReactComposable terminal animation primitives with typed command playback, tabbed scenarios, and customizable output…
ANSI terminal outputReUI · ReactAgent stdout with SGR colour codes parsed by ansiToLines, retintable via --code-ansi-* variables.
Code MorphUI Lab · ReactGlides every surviving token to its new spot as a tutorial moves to the next step.
Terminal outputReUI · ReactUnhighlighted command output with a wrap toggle.