WinSeparator

A horizontal dotted separator line — minimal spacing, clean separation.

When to use

Use WinSeparator to visually divide sections within a dialog or panel.

When not to use

Do not use WinSeparator for page-level section breaks. Use margins or spacing instead.

Installation

Install the package:

npm install win2k-ui

Then import the component:

import { WinSeparator } from 'win2k-ui'

Make sure you have Tailwind CSS v4 set up, then add this to your root CSS file:

@import "tailwindcss";
@import "win2k-ui/styles.css";

No other dependencies required. The components ship with zero third-party UI dependencies — just Tailwind CSS 4 and React.

Preview

Interactive examples showing various states and configurations. Click “Show Code” to view the source for each variation.

Default

This content is above the separator.

This content is below the separator.

Between dialogs

User Information

Enter your name and contact details.

Account Settings

Configure your login preferences.

Props

All available props for the WinSeparator component.

Prop	Type	Default	Description
`className`	`string`	`''`	Additional CSS classes.

Usage

Example showing the component in a typical context:

import { WinSeparator } from 'win2k-ui'

export function Example() {
  return (
    <div>
      <p>Section 1</p>
      <WinSeparator />
      <p>Section 2</p>
    </div>
  )
}