Window
A Windows 98 window shell with title bar, controls, and body slots.
Preview
Install Windows 98 styled components?
Installation
pnpm dlx shadcn@latest add https://react98-ui.vercel.app/r/window.jsonnpx shadcn@latest add https://react98-ui.vercel.app/r/window.jsonyarn dlx shadcn@latest add https://react98-ui.vercel.app/r/window.jsonbunx shadcn@latest add https://react98-ui.vercel.app/r/window.jsonUsage
import {
Window,
WindowBody,
WindowControl,
WindowControls,
WindowTitle,
WindowTitleBar,
} from "@/components/ui/98/window";
export function Example() {
return (
<Window>
<WindowTitleBar>
<WindowTitle>My App</WindowTitle>
<WindowControls>
<WindowControl label="_" />
<WindowControl label="□" />
<WindowControl label="×" />
</WindowControls>
</WindowTitleBar>
<WindowBody>Content</WindowBody>
</Window>
);
}Props
| Component | Props | Description |
|---|---|---|
Window | HTMLAttributes<HTMLDivElement> | Outer window surface. |
WindowTitleBar | HTMLAttributes<HTMLDivElement> | Title bar row. |
WindowTitle | HTMLAttributes<HTMLDivElement> | Title text container. |
WindowControls | HTMLAttributes<HTMLDivElement> | Groups title bar controls. |
WindowControl | ButtonHTMLAttributes<HTMLButtonElement> & { label: "_" | "□" | "×" } | Minimize, maximize, or close control. |
WindowBody | HTMLAttributes<HTMLDivElement> | Window content area. |