Window

A versatile container component for creating structured layouts with customizable headers, body content, and media sections. Features header elements including titles, tabs, and action buttons, plus body components with adjustable padding sizes, styled text boxes, and media content support.

Source

Github

import { Window } from 'welcome-ui/Window'

const Example = () => {
  return (
    <Window>
      <Window.Header>
        <Window.Header.LeftActions isExpandable />
        <Window.Header.Title title="Find your people" />
        <Window.Header.RightActions isClosable />
      </Window.Header>
      <Window.Body>
        At work, behind every success story, someone found their people. Find your next job on
        Welcome to the Jungle.
      </Window.Body>
    </Window>
  )
}
export default Example

Examples

Header

Use Window.Header to create the header section of your window. The header supports various sub-components for flexible layouts. Use Window.Header.Title to display a title in the header.

Github

Tabs

Use Window.Header.Tabs to display tabs in the header. Requires a tab store and an array of tab items. Use Window.TabPanel components to display content for each tab.

Github

Actions

Left Actions

Use Window.Header.LeftActions for expandable controls on the left side of the header.

Right Actions

Use Window.Header.RightActions for closable controls and custom action buttons on the right side of the header.

Github

Loader Breadcrumb