AppWindow

Window container with close / minimize / zoom controls, title, custom header slot and actions. SegmentedTabs is the compact view switcher for its title bar.

npx @kznlabs/labsui add app-window segmented-tabs

Deploy web@4f2a1cReady2m ago
Deploy api@9b77e0Building5m ago
Deploy web@1c09d3Failed1h ago

The window controls are buttons: try close, minimize, zoom.

import { AppWindow } from "@/components/ui/app-window";export function Preview() {  return (    <AppWindow title="Preview" onClose={close} glass bodyClassName="p-5">      <p>Window content goes here.</p>    </AppWindow>  );}

"use client";import { useState } from "react";import { AppWindow } from "@/components/ui/app-window";import { SegmentedTabs } from "@/components/ui/segmented-tabs";const views = ["Overview", "Activity", "Settings"];export function DeploysWindow({ onClose }: { onClose: () => void }) {  const [view, setView] = useState(views[0]);  return (    <AppWindow      onClose={onClose}      header={        <SegmentedTabs          label="Views"          items={views}          value={view}          onChange={setView}        />      }      bodyClassName="p-5"    >      <h2 className="font-medium">{view}</h2>    </AppWindow>  );}

<AppWindow>

actions
ReactNode
Right-aligned titlebar slot.
bodyClassName
string
Classes for the content area under the title bar.
glass
boolean
Translucent, blurred surface.
header
ReactNode
Custom titlebar content (tabs, navbar, search); replaces the centered title.
onClose
() => void
Passing a handler turns the matching dot into a button.
onMaximize
() => void
Shows the maximize control; called when it is pressed.
onMinimize
() => void
Shows the minimize control; called when it is pressed.
title
ReactNode
Centered titlebar text.

Prop	Type	Default
`actions` Right-aligned titlebar slot.	`ReactNode`	—
`bodyClassName` Classes for the content area under the title bar.	`string`	—
`glass` Translucent, blurred surface.	`boolean`	—
`header` Custom titlebar content (tabs, navbar, search); replaces the centered title.	`ReactNode`	—
`onClose` Passing a handler turns the matching dot into a button.	`() => void`	—
`onMaximize` Shows the maximize control; called when it is pressed.	`() => void`	—
`onMinimize` Shows the minimize control; called when it is pressed.	`() => void`	—
`title` Centered titlebar text.	`ReactNode`	—

Also accepts every <div> prop.

<SegmentedTabs>

Segmented tabs. One indicator slides under the active item on a spring, always behind the labels.

items*
readonly string[]
Labels, also used as values.
label*
string
Accessible name for the tab list.
onChange*
(item: string) => void
Called with the pressed item.
value*
string
Active item; marked aria-current.

Prop	Type	Default
`items*` Labels, also used as values.	`readonly string[]`	—
`label*` Accessible name for the tab list.	`string`	—
`onChange*` Called with the pressed item.	`(item: string) => void`	—
`value*` Active item; marked `aria-current`.	`string`	—

* required. Every component also takes className.