CommandLine

commandline-1779394643275.tsx

'use client'
import { useState, useEffect } from 'react'

const SEQUENCE = [
  { type:'input', text:'npm install empire-ui', delay:80 },
  { type:'output', text:'Installing dependencies...', delay:0 },
  { type:'output', text:'✓ Added 1 package in 0.8s', delay:0 },
  { type:'input', text:'import { GradientButton } from "empire-ui"', delay:60 },
  { type:'output', text:'✨ Ready to use!', delay:0 },
]

export default function CommandLine() {
  const [lines, setLines] = useState([])
  const [current, setCurrent] = useState('')
  const [step, setStep] = useState(0)
  useEffect(() => {
    if (step >= SEQUENCE.length) return
    const item = SEQUENCE[step]
    if (item.type === 'output') {
      setTimeout(() => {
        setLines(l => [...l, { type:'output', text:item.text }])
        setStep(s => s+1)
      }, 300)
      return
    }
    let i = 0
    const t = setInterval(() => {
      i++
      setCurrent(item.text.slice(0,i))
      if (i >= item.text.length) {
        clearInterval(t)
        setTimeout(() => {
          setLines(l => [...l, { type:'input', text:item.text }])
          setCurrent('')
          setStep(s => s+1)
        }, 400)
      }
    }, item.delay)
    return () => clearInterval(t)
  }, [step])
  return (
    <div style={{ background:'#1e1e2e', borderRadius:'14px', overflow:'hidden', maxWidth:'480px', fontFamily:'monospace' }}>
      <div style={{ padding:'10px 14px', background:'#16162a', display:'flex', gap:'6px' }}>
        {['#ef4444','#f59e0b','#10b981'].map(c=><div key={c} style={{width:'12px',height:'12px',borderRadius:'50%',background:c}}/>)}
      </div>
      <div style={{ padding:'16px', display:'flex', flexDirection:'column', gap:'4px' }}>
        {lines.map((l, i) => (
          <div key={i} style={{ fontSize:'13px' }}>
            {l.type==='input' ? <><span style={{color:'#10b981'}}>$ </span><span style={{color:'#e2e8f0'}}>{l.text}</span></> : <span style={{color:'#94a3b8'}}>{l.text}</span>}
          </div>
        ))}
        {step < SEQUENCE.length && SEQUENCE[step].type==='input' && (
          <div style={{ fontSize:'13px' }}>
            <span style={{color:'#10b981'}}>$ </span>
            <span style={{color:'#e2e8f0'}}>{current}</span>
            <span style={{ background:'#e2e8f0', width:'8px', height:'14px', display:'inline-block', verticalAlign:'middle', animation:'blink 1s step-end infinite' }}/>
            <style>{'@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}'}</style>
          </div>
        )}
      </div>
    </div>
  )
}

Component info

CategoryCode

Frameworkreact

TierFREE

Copies0

About

Animated terminal command-line with typing effect and output

More from Code

'use client'
import { useState } from 'react'

const EXAMPLES = {
  tsx: {
    label: 'TypeScript',
    code: `import { useState } from 'react'

interface ButtonProps {
  variant?: 'primary' | 'ghost'
  children: React.ReactNode
  onClick?: () => voi

CodeBlock

Code

'use client';
import { useState, useRef, useEffect } from 'react';

export default function TerminalPrompt() {
  const [history, setHistory] = useState([
    { type: 'output', text: 'Welcome to Empire Terminal v2.0.0' },
    { type: 'output', text: '

TerminalPrompt

Code

'use client'
import { useState } from 'react'

const SAMPLE = `import { GradientButton } from 'empire-ui'

export default function App() {
  return (
    <GradientButton
      label="Get Started"
      onClick={() => console.log('clicked')}
    />

CodeBlock

Code

'use client'
import { useState } from 'react'

const DEFAULT = `<div style="padding:20px;background:linear-gradient(135deg,#6d28d9,#2563eb);borderRadius:12px;color:#fff;textAlign:center">
  <h2>Live Preview ✨</h2>
  <p>Edit the code on the left!</p>

LiveCodeEditor

Code