Window

OS-style window mockup component for showcasing code or content.

Import

import { Window } from 'asterui'

Examples

Basic Window

Simple window mockup with content.

</>

Hello from the window!

import { Window } from 'asterui'

function App() {
  return (
      <Window>
        <p>Hello from the window!</p>
      </Window>
    )
}

export default App

With Code

Window containing code display.

</>

npm install asterui

import { Window, Code } from 'asterui'

function App() {
  return (
      <Window>
        <Code className="bg-base-300">
          <Code.Line>npm install asterui</Code.Line>
        </Code>
      </Window>
    )
}

export default App

Multi-line Code

Window with multiple lines of code.

</>

import { Button } from 'asterui'

function App() {

  return <Button>Click me</Button>

}

import { Window, Code } from 'asterui'

function App() {
  return (
      <Window>
        <Code className="bg-base-300">
          <Code.Line>import {'{ Button }'} from 'asterui'</Code.Line>
          <Code.Line></Code.Line>
          <Code.Line>function App() {'{'}</Code.Line>
          <Code.Line>  return {'<Button>Click me</Button>'}</Code.Line>
          <Code.Line>{'}'}</Code.Line>
        </Code>
      </Window>
    )
}

export default App

With Prefix

Code lines with command prefixes.

</>

npm install asterui

npm run dev

Server running on http://localhost:3000

import { Window, Code } from 'asterui'

function App() {
  return (
      <Window>
        <Code className="bg-base-300">
          <Code.Line prefix="$">npm install asterui</Code.Line>
          <Code.Line prefix="$">npm run dev</Code.Line>
          <Code.Line prefix=">">Server running on http://localhost:3000</Code.Line>
        </Code>
      </Window>
    )
}

export default App

Styled Window

Custom styled window with different background.

</>

echo "Custom styled window"

Custom styled window

import { Window, Code } from 'asterui'

function App() {
  return (
      <Window className="bg-neutral">
        <Code className="bg-neutral text-neutral-content">
          <Code.Line prefix="~">echo "Custom styled window"</Code.Line>
          <Code.Line>Custom styled window</Code.Line>
        </Code>
      </Window>
    )
}

export default App

Custom Content

Window with custom content styling.

</>

Window Content

This window has custom content styling.

You can put any content here.

import { Window } from 'asterui'

function App() {
  return (
      <Window contentClassName="p-4">
        <div className="space-y-2">
          <h3 className="font-bold">Window Content</h3>
          <p>This window has custom content styling.</p>
          <p className="text-sm opacity-70">You can put any content here.</p>
        </div>
      </Window>
    )
}

export default App

API

Property	Description	Type	Default
children	Window content	React.ReactNode	-
className	Additional CSS classes for the window	string	-
contentClassName	Additional CSS classes for the content area	string	-

Accessibility

• Window chrome is decorative and marked as presentational
• Content area maintains proper reading order
• Code blocks are readable by screen readers
• Traffic light buttons are non-interactive decorations