WebTUI

https://webtui.ironclad.sh/start/intro
Admin
WebTUI is a modular CSS library that brings the aesthetic of Terminal User Interfaces (TUIs) to the...
Tokens:23,142
Snippets:227
Trust Score:5.9
Update:1 year ago
Show doc for...
Tokens:
Raw
### Start Development Server with Bun

Source: https://webtui.ironclad.sh/start/intro/contributing/contributing

Once dependencies are installed, execute this command to start the local development server. Bun will run the 'dev' script defined in the project's configuration, typically launching the application for testing and development.

```bash
bun run dev
```

--------------------------------

### Terminal Shop Interface Overview

Source: https://webtui.ironclad.sh/start/intro/examples

An example of a text-based user interface for a shop application, showing available navigation options (shop, account, cart) and product categories (featured, originals) with their respective items.

```CLI
terminal
s
shop
a
account
c
cart
$ 0
[0]

~ featured ~
flow
cron

~ originals ~
artisan
[object Object]
segfault
dark mode
404
```

--------------------------------

### Import WebTUI Stylesheets from CDN in HTML

Source: https://webtui.ironclad.sh/start/intro/start/installation

Provides an example of importing WebTUI base, utility, and component stylesheets directly from a CDN within an HTML `<style>` block, suitable for environments without a bundler.

```HTML
<style>
  @layer base, utils, components;

  @import "https://cdn.jsdelivr.net/npm/@webtui/[email protected]/dist/base.css";

  /* Utils */
  @import "https://cdn.jsdelivr.net/npm/@webtui/[email protected]/dist/utils/box.css";

  /* Components */
  @import "https://cdn.jsdelivr.net/npm/@webtui/[email protected]/dist/components/button.css";
  @import "https://cdn.jsdelivr.net/npm/@webtui/[email protected]/dist/components/typography.css";
</style>
```

--------------------------------

### Pre Component Size Variants HTML Example

Source: https://webtui.ironclad.sh/start/intro/start/changelog

HTML examples demonstrating different size variants for the `pre` component: small, default, and large (which was the old default). This illustrates the visual changes in `pre` element sizing.

```html
<pre size-="small">Small</pre>
<pre>Default</pre>
<pre size-="large">Large (old default)</pre>
```

--------------------------------

### Install WebTUI CSS Package with Package Managers

Source: https://webtui.ironclad.sh/start/intro/start/installation

Instructions for installing the base WebTUI CSS package using common Node.js package managers like Bun, npm, Yarn, and pnpm.

```bun
bun i @webtui/css
```

```npm
npm i @webtui/css
```

```yarn
yarn add @webtui/css
```

```pnpm
pnpm install @webtui/css
```

--------------------------------

### Install Project Dependencies with Bun

Source: https://webtui.ironclad.sh/start/intro/contributing/contributing

After cloning the repository, use this command to install all necessary project dependencies. It leverages Bun, a fast JavaScript runtime and package manager, to fetch and set up the required packages.

```bash
bun i
```

--------------------------------

### Install Nord Theme with Package Managers

Source: https://webtui.ironclad.sh/start/intro/plugins/theme-nord

Instructions for installing the `@webtui/theme-nord` package using various JavaScript package managers.

```Bun
bun i @webtui/theme-nord
```

```npm
npm i @webtui/theme-nord
```

```Yarn
yarn add @webtui/theme-nord
```

```pnpm
pnpm i @webtui/theme-nord
```

--------------------------------

### Pre Component Size Layout CSS Example

Source: https://webtui.ironclad.sh/start/intro/start/changelog

CSS styling for the layout of `pre` component size examples. It uses flexbox to arrange the `pre` elements vertically with a specified gap, providing a clear visual separation for demonstration purposes.

```css
body {
display: flex;
flex-direction: column;
gap: 1ch;
}
```

--------------------------------

### Standard Tooltip Usage Example

Source: https://webtui.ironclad.sh/start/intro/components/tooltip

Provides a simple HTML example demonstrating the basic implementation of a tooltip, consisting of a trigger element and its associated content container.

```HTML
<div is-="tooltip">
    <div is-="tooltip-trigger">Tooltip trigger</div>
    <div is-="tooltip-content">
        <p>Tooltip content</p>
    </div>
</div>
```

--------------------------------

### Install WebTUI CSS package

Source: https://webtui.ironclad.sh/start/intro/installation/nextjs

Instructions to install the base WebTUI CSS package using various JavaScript package managers like Bun, npm, Yarn, and pnpm.

```Shell
bun i @webtui/css
```

```Shell
npm i @webtui/css
```

```Shell
yarn add @webtui/css
```

```Shell
pnpm install @webtui/css
```

--------------------------------

### Install WebTUI CSS Package

Source: https://webtui.ironclad.sh/start/intro/installation/vite

Commands to install the base WebTUI CSS package using various JavaScript package managers.

```shell
bun i @webtui/css
npm i @webtui/css
yarn add @webtui/css
pnpm install @webtui/css
```

--------------------------------

### WebTUI Input Sizing Examples

Source: https://webtui.ironclad.sh/start/intro/components/input

Demonstrates different sizing options for the WebTUI Input component (small, default, large) and the CSS context for displaying them.

```HTML
<input size-="small" placeholder="Small" />
<input placeholder="Default" />
<input size-="large" placeholder="Large" />
```

```CSS
body {
  display: flex;
  flex-direction: column;
  gap: 1lh;
}
```

--------------------------------

### Import Specific WebTUI Utilities and Components via CSS

Source: https://webtui.ironclad.sh/start/intro/start/installation

Demonstrates how to import individual WebTUI utility and component stylesheets after the base stylesheet, respecting the previously defined CSS layer order.

```CSS
@layer base, utils, components;

@import "@webtui/css/base.css";

/* Utils */
@import "@webtui/css/utils/box.css";

/* Components */
@import "@webtui/css/components/button.css";
@import "@webtui/css/components/typography.css";
```

--------------------------------

### Button Component Size Layout CSS Example

Source: https://webtui.ironclad.sh/start/intro/start/changelog

CSS styling for the layout of `button` component size examples. It uses flexbox to arrange the buttons horizontally with a specified gap, aligning them to the start of the flex container.

```css
body {
display: flex;
align-items: flex-start;
gap: 1ch;
}
```

--------------------------------

### Button Component Size Variants HTML Example

Source: https://webtui.ironclad.sh/start/intro/start/changelog

HTML examples demonstrating different size variants for the `button` component: large (old default), default, and small. This showcases the updated default button size and available options.

```html
<button size-="large">Large (old default)</button>
<button>Default</button>
<button size-="small">Small</button>
```

--------------------------------

### Install WebTUI Gruvbox Theme

Source: https://webtui.ironclad.sh/start/intro/plugins/theme-gruvbox

These commands demonstrate how to install the Gruvbox theme for WebTUI using various JavaScript package managers. Users can choose their preferred manager to add the theme to their project dependencies.

```Bash
bun i @webtui/theme-gruvbox
npm i @webtui/theme-gruvbox
yarn add @webtui/theme-gruvbox
pnpm i @webtui/theme-gruvbox
```

--------------------------------

### Popover Positional Examples HTML

Source: https://webtui.ironclad.sh/start/intro/components/popover

Provides HTML examples demonstrating various position- values like 'bottom right', 'bottom left', 'top right', and 'top left' for precise popover placement.

```HTML
<div class="row">
<details is-="popover" position-="bottom right">
<summary>BR ↘</summary>
<div class="popover-content">Popover content</div>
</details>
<details is-="popover" position-="bottom left">
<summary>BL ↙</summary>
<div class="popover-content">Popover content</div>
</details>
</div>
<div class="row">
<details is-="popover" position-="top right">
<summary>TR ↗</summary>
<div class="popover-content">Popover content</div>
</details>
<details is-="popover" position-="top left">
<summary>TL ↖</summary>
<div class="popover-content">Popover content</div>
</details>
</div>
```

--------------------------------

### Popover Positional Examples CSS

Source: https://webtui.ironclad.sh/start/intro/components/popover

Includes CSS for the popover positioning examples, defining layout for rows and styling for summary and popover content elements.

```CSS
body {
display: flex;
flex-direction: column;
gap: 1lh;
justify-content: center;
height: 100vh;
}
.row {
display: flex;
gap: 1ch;
aling-items: center;
justify-content: center;
}
summary {
background-color: var(--background1);
}
.popover-content {
background-color: var(--background1);
white-space: nowrap;
padding: 1lh 1ch;
}
```

--------------------------------

### Basic Preformatted Text Example

Source: https://webtui.ironclad.sh/start/intro/components/pre

Demonstrates the fundamental usage of the `<pre>` tag to display text exactly as it is written, preserving whitespace and line breaks.

```HTML
<pre>This is preformatted text</pre>
```

--------------------------------

### Import Full WebTUI Library via ESM

Source: https://webtui.ironclad.sh/start/intro/start/installation

Imports the complete WebTUI library using ESM syntax, suitable for bundler environments during development when individual module imports are not desired.

```JavaScript
import "@webtui/css";
```

--------------------------------

### Terminal Shop Interaction Commands

Source: https://webtui.ironclad.sh/start/intro/examples

A list of commands and keyboard shortcuts for interacting with the terminal-based shop interface, including product navigation, quantity adjustment, cart access, and quitting the application.

```CLI
r 🇺 (US)
↑/↓ products
+/- qty
c cart
q quit
```

--------------------------------

### Import Full WebTUI Library from CDN via Link Tag

Source: https://webtui.ironclad.sh/start/intro/start/installation

Imports the complete WebTUI CSS library from a CDN using an HTML `<link>` tag, offering an alternative to the `@import` method for full library inclusion.

```HTML
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@webtui/[email protected]/dist/full.css"
/>
```

--------------------------------

### Applying WebTUI Themes in HTML

Source: https://webtui.ironclad.sh/start/intro/index

Examples demonstrating how to apply different pre-built color themes to a WebTUI project by importing the theme's CSS and setting the `data-webtui-theme` attribute on the `<html>` tag.

```HTML
<style>
@import "@webtui/theme-catppuccin";
</style>

<html data-webtui-theme="catppuccin-mocha"></html>
```

```HTML
<style>
@import "@webtui/theme-catppuccin";
</style>

<html data-webtui-theme="catppuccin-latte"></html>
```

```HTML
<style>
@import "@webtui/theme-nord";
</style>

<html data-webtui-theme="nord"></html>
```

```HTML
<style>
@import "@webtui/theme-gruvbox";
</style>

<html data-webtui-theme="gruvbox-dark-hard"></html>
```

```HTML
<style>
@import "@webtui/theme-gruvbox";
</style>

<html data-webtui-theme="gruvbox-light-hard"></html>
```

--------------------------------

### Install Nerd Font Plugin

Source: https://webtui.ironclad.sh/start/intro/plugins/plugin-nf

Instructions for installing the Nerd Font plugin using common JavaScript package managers. This step is required to add the plugin's dependencies to your project.

```bun
bun i @webtui/plugin-nf
```

```npm
npm i @webtui/plugin-nf
```

```yarn
yarn add @webtui/plugin-nf
```

```pnpm
pnpm i @webtui/plugin-nf
```

--------------------------------

### CSS Layout for Pre Examples

Source: https://webtui.ironclad.sh/start/intro/components/pre

Provides a CSS snippet for structuring the `body` element using flexbox, useful for arranging multiple preformatted text examples with consistent spacing.

```CSS
body {
    display: flex;
    flex-direction: column;
    gap: 1lh;
}
```

--------------------------------

### Import Full WebTUI Library from CDN via @import

Source: https://webtui.ironclad.sh/start/intro/start/installation

Imports the complete WebTUI CSS library from a CDN using an `@import` rule within an HTML `<style>` block, providing a single file import for the entire library.

```HTML
<style>
    @import "https://cdn.jsdelivr.net/npm/@webtui/[email protected]/dist/full.css";
</style>
```

--------------------------------

### Install Catppuccin WebTUI Theme via Package Manager

Source: https://webtui.ironclad.sh/start/intro/plugins/theme-catppuccin

This snippet provides commands to install the Catppuccin theme for WebTUI using popular Node.js package managers like Bun, npm, Yarn, and pnpm. Users should choose their preferred package manager to add the theme to their project dependencies.

```Shell
bun i @webtui/theme-catppuccin
npm i @webtui/theme-catppuccin
yarn add @webtui/theme-catppuccin
pnpm i @webtui/theme-catppuccin
```

--------------------------------

### HTML Button Size Examples

Source: https://webtui.ironclad.sh/start/intro/components/button

Demonstrates buttons with different size- attributes, showcasing default, small, and large sizes.

```HTML
<button>Default</button>
<button size-="small">Small</button>
<button size-="large">Large</button>
```

--------------------------------

### Separator with Dual Start and End Caps Usage

Source: https://webtui.ironclad.sh/start/intro/components/separator

Explains how to specify two values for the `cap-` attribute to independently control the start and end behavior of the separator. Provides examples for `edge bisect`, `default edge`, and `bisect default` combinations.

```HTML
<div is-="separator" cap-="edge bisect"></div>
<div is-="separator" cap-="default edge"></div>
<div is-="separator" cap-="bisect default"></div>
```

--------------------------------

### Basic HTML Table Structure Example

Source: https://webtui.ironclad.sh/start/intro/components/table

Demonstrates a complete HTML table structure including `<thead>` and `<tbody>` with sample data for names, ages, and countries. This example illustrates the fundamental elements required to display tabular data.

```HTML
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>USA</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>Canada</td>
</tr>
</tbody>
</table>
```

--------------------------------

### HTML Button Variant Examples

Source: https://webtui.ironclad.sh/start/intro/components/button

Provides examples of buttons styled with different variant- attributes, corresponding to base theme colors.

```HTML
<button variant-="background0">background0</button>
<button variant-="background1">background1</button>
<button variant-="background2">background2</button>
<button variant-="background3">background3</button>
<button variant-="foreground0">foreground0</button>
<button variant-="foreground1">foreground1</button>
<button variant-="foreground2">foreground2</button>
```

--------------------------------

### Control Dialog Positioning with `position-` Property

Source: https://webtui.ironclad.sh/start/intro/components/dialog

Demonstrates how to use the `position-` property to anchor dialogs horizontally and vertically. It shows examples for single-value (e.g., 'center') and two-value (e.g., 'start end') positioning, along with a comprehensive HTML example showcasing various position combinations.

```HTML
<dialog position-="<anchor>"></dialog>
<dialog position-="<x-anchor> <y-anchor>"></dialog>

<dialog position-="center"></dialog>
<dialog position-="start end"></dialog>

<div class="row">
<dialog id="start" position-="start" popover>start</dialog>
<button popovertarget="start">start</button>

<dialog id="center-start" position-="center start" popover>end start</dialog>
<button popovertarget="center-start">center start</button>

<dialog id="end-start" position-="end start" popover>end start</dialog>
<button popovertarget="end-start">end start</button>
</div>

<div class="row">
<dialog id="start-center" position-="start center" popover>start center</dialog>
<button popovertarget="start-center">start center</button>

<dialog id="center" position-="center" popover>center</dialog>
<button popovertarget="center">center</button>

<dialog id="end-center" position-="end center" popover>end center</dialog>
<button popovertarget="end-center">end center</button>
</div>

<div class="row">
<dialog id="start-end" position-="start end" popover>start end</dialog>
<button popovertarget="start-end">start end</button>

<dialog id="center-end" position-="center end" popover>center end</dialog>
<button popovertarget="center-end">center end</button>

<dialog id="end" position-="end" popover>end</dialog>
<button popovertarget="end">end</button>
</div>
```

```CSS
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
dialog {
padding: 1lh 2ch;
background-color: var(--background1);
}
.row {
display: flex;
gap: 1ch;
}
```

--------------------------------

### Preformatted Text Sizing Examples

Source: https://webtui.ironclad.sh/start/intro/components/pre

Illustrates how to apply different predefined sizes (small, default, large) to the `<pre>` element using the `size-` attribute for varied visual presentation.

```HTML
<pre size-="small">Small pre</pre>
```

```HTML
<pre>Default pre</pre>
```

```HTML
<pre size-="large">Large pre</pre>
```

--------------------------------

### Install WebTUI CSS Package with Package Managers

Source: https://webtui.ironclad.sh/start/intro/installation/astro

This snippet demonstrates how to install the `@webtui/css` package using various JavaScript package managers. Choose your preferred manager to add the dependency to your Astro project.

```Shell
bun i @webtui/css
npm i @webtui/css
yarn add @webtui/css
pnpm install @webtui/css
```

--------------------------------

### Import WebTUI Components via ESM

Source: https://webtui.ironclad.sh/start/intro/start/installation

Shows how to import WebTUI CSS components using ESM syntax within a JavaScript or TypeScript file, typically for projects using a bundler.

```JavaScript
import "@webtui/css/components/button.css";

type Props = {
  /* ... */
};

export default function Button(props: Props) {
  return <button>{props.children}</button>;
}
```

--------------------------------

### Define CSS Layer Order and Import WebTUI Base Styles

Source: https://webtui.ironclad.sh/start/intro/start/installation

Defines the order of CSS layers using the `@layer` at-rule and imports the base WebTUI stylesheet. This ensures proper cascading and organization of styles.

```CSS
@layer base, utils, components;

@import "@webtui/css/base.css";
```

--------------------------------

### HTML Disabled Button Example

Source: https://webtui.ironclad.sh/start/intro/components/button

Shows an example of a button rendered in a disabled state using the disabled attribute.

```HTML
<button disabled>Disabled</button>
```

--------------------------------

### ASCII Box Border Types Examples

Source: https://webtui.ironclad.sh/start/intro/start/ascii-boxes

Examples of applying different border styles like square, round, and double, including combinations, using the `box-` attribute.

```HTML
<div box-="square">Square</div>
<div box-="round">Round</div>
<div box-="double">Double</div>
<div box-="double round">Double + Round</div>
```

--------------------------------

### HTML Examples for Nord Theme Components

Source: https://webtui.ironclad.sh/start/intro/plugins/theme-nord

Demonstrates the visual application of Nord theme colors to headings, badges, and buttons within WebTUI, showcasing how different "variant-" attributes map to Nord palette colors.

```HTML
<h1>Headings</h1>
<h2>Are</h2>
<h3>Colored</h3>
<span is-="badge" variant-="nord7">As</span>
<span is-="badge" variant-="nord8">Are</span>
<span is-="badge" variant-="nord9">The</span>
<span is-="badge" variant-="nord10">Badge</span>
<span is-="badge" variant-="nord11">Colors</span><br/>
<span is-="badge" variant-="nord12">And</span><br/>
<button variant-="nord13">All</button>
<button variant-="nord14">The</button>
<button variant-="nord15">Buttons</button>
```

--------------------------------

### Popover Backdrop HTML Example

Source: https://webtui.ironclad.sh/start/intro/components/popover

Shows a basic popover with additional content outside, illustrating how the backdrop affects elements behind the popover.

```HTML
<details is-="popover">
<summary>Click Me</summary>
<div class="popover-content">Popover content</div>
</details>
<p>This appears behind the backdrop</p>
```

--------------------------------

### Tooltip Positioning Examples (Top/Bottom, Left/Right)

Source: https://webtui.ironclad.sh/start/intro/components/tooltip

Illustrates how to position tooltip content using `position-` attributes for various corners (bottom right, bottom left, top right, top left). Includes accompanying CSS for layout and visual presentation of the examples.

```HTML
<div class="row">
<div is-="tooltip">
<div is-="tooltip-trigger badge" variant-="background2">BR ↘</div>
<div is-="tooltip-content" position-="bottom right">
<p>Tooltip content</p>
</div>
</div>
<div is-="tooltip">
<div is-="tooltip-trigger badge" variant-="background2">BL ↙</div>
<div is-="tooltip-content" position-="bottom left">
<p>Tooltip content</p>
</div>
</div>
</div>
<div class="row">
<div is-="tooltip">
<span is-="tooltip-trigger badge" variant-="background2">TR ↗</span>
<div is-="tooltip-content" position-="top right">
<p>Tooltip content</p>
</div>
</div>
<div is-="tooltip">
<span is-="tooltip-trigger badge" variant-="background2">TL ↖</span>
<div is-="tooltip-content" position-="top left">
<p>Tooltip content</p>
</div>
</div>
</div>
```

```CSS
body {
display: flex;
flex-direction: column;
gap: 1lh;
justify-content: center;
height: 100vh;
}
.row {
display: flex;
gap: 1ch;
aling-items: center;
justify-content: center;
}
[is-="tooltip-content"] {
background-color: var(--background1);
padding: 1lh 1ch;
}
```

--------------------------------

### Deprecated Box Containment HTML Syntax

Source: https://webtui.ironclad.sh/start/intro/start/changelog

Example of the old `box-` utility property syntax, used in versions prior to 0.1.0. It included a `contain:` keyword to control padding for top and/or bottom lines, which has since been replaced.

```html
<div box-="square contain:!top"></div>
<div box-="square contain:!bottom"></div>
<div box-="square contain:none"></div>
```

--------------------------------

### HTML Button Box Border Examples

Source: https://webtui.ironclad.sh/start/intro/components/button

Illustrates buttons with various box- attributes for different border styles, requiring the Box Utility.

```HTML
<button box-="round">Round</button>
<button box-="square">Square</button>
<button box-="double">Double</button>
```

--------------------------------

### HTML Component Examples for WebTUI

Source: https://webtui.ironclad.sh/start/intro/index

Demonstrates basic WebTUI components using semantic HTML tags and attributes, including a button, a switch checkbox, and a badge. Attributes ending with a dash (-) ensure compatibility with frameworks like React.

```HTML
<button variant-="foreground0">
Click
</button>

<label>
<input type="checkbox" is-="switch" />
Hello there
</label>

<span is-="badge" variant-="yellow">
Warning
</span>
```

--------------------------------

### HTML Example for Inherited Box Border Color

Source: https://webtui.ironclad.sh/start/intro/start/changelog

Demonstrates how the `--box-border-color` CSS variable inheritance works across nested HTML elements. It shows how a value set on an ancestor can be inherited by children, and how it can be overridden by a more specific declaration on a descendant.

```html
<body style="--box-border-color: red;">
    <div box-="square">red border</div>
    <div box-="square" style="--box-border-color: blue;">blue border</div>
    <div style="--box-border-color: green;">
        <div box-="square">green border</div>
    </div>
</body>
```

--------------------------------

### Tooltip Baseline Positioning Examples

Source: https://webtui.ironclad.sh/start/intro/components/tooltip

Demonstrates the use of `baseline-*` values in the `position-` attribute to align tooltip content relative to the edges of the trigger. Includes supporting CSS for layout and visual presentation of the examples.

```HTML
<div class="row">
<div is-="tooltip">
<div is-="tooltip-trigger badge" variant-="background2">Bottom Baseline-Right</div>
<div is-="tooltip-content" position-="bottom baseline-right">
<p>Tooltip content</p>
</div>
</div>
<div is-="tooltip">
<div is-="tooltip-trigger badge" variant-="background2">Bottom Baseline-Left</div>
<div is-="tooltip-content" position-="bottom baseline-left">
<p>Tooltip content</p>
</div>
</div>
</div>
<div class="row">
<div is-="tooltip">
<span is-="tooltip-trigger badge" variant-="background2">Right Baseline-Top</span>
<div is-="tooltip-content" position-="right baseline-top">
<p>Tooltip content</p>
</div>
</div>
<div is-="tooltip">
<span is-="tooltip-trigger badge" variant-="background2">Left Baseline-Top</span>
<div is-="tooltip-content" position-="left baseline-top">
<p>Tooltip content</p>
</div>
</div>
</div>
```

```CSS
body {
display: flex;
flex-direction: column;
gap: 1lh;
justify-content: center;
height: 100vh;
}
.row {
display: flex;
gap: 1ch;
aling-items: center;
justify-content: center;
}
[is-="tooltip-content"] {
background-color: var(--background1);
padding: 1lh 1ch;
}
```

--------------------------------

### Import Full WebTUI CSS Library in HTML

Source: https://webtui.ironclad.sh/start/intro/start/installation

Imports the entire WebTUI CSS library using the direct package name within an HTML `<style>` block. This method is generally recommended for development purposes to avoid importing unused CSS in production.

```HTML
<style>
    @import "@webtui/css";
</style>
```

--------------------------------

### HTML for Sizing Switch Component

Source: https://webtui.ironclad.sh/start/intro/components/switch

This example illustrates how to adjust the visual size of the Switch component. The size- attribute allows for predefined size variations, such as 'small', to fit different layout requirements.

```HTML
<label>
    <input type="checkbox" is-="switch" size-="small" />
    Small
</label>
<label>
    <input type="checkbox" is-="switch" />
    Default
</label>
```

--------------------------------

### HTML Structure for Dialogs with Offset Examples

Source: https://webtui.ironclad.sh/start/intro/components/dialog

This HTML snippet demonstrates the basic structure for creating dialog elements with associated buttons. It includes examples of dialogs with and without custom offsets, using `popover` attributes for display.

```HTML
<div class="row">
<dialog id="full" size-="full" container-="fill" popover>no offsets (esc to close)</dialog>
<button popovertarget="full">no offsets</button>

<dialog id="offset" size-="full" container-="fill" popover>offsets (esc or click on backdrop to close)</dialog>
<button popovertarget="offset">offsets</button>
</div>
```

--------------------------------

### Full ASCII Box Example with Custom Layout

Source: https://webtui.ironclad.sh/start/intro/start/ascii-boxes

Demonstrates a complex ASCII box structure with header, content, and buttons, styled with custom CSS for layout and using the `shear-` attribute.

```HTML
<div box-="square" shear-="both">
<div class="header">
<span is-="badge" variant-="background0">top-left</span>
<span is-="badge" variant-="background0">top-right</span>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet sit dolor ipsum lorem idk i dont speak french</p>
<div id="buttons">
<button box-="round">Cancel</button>
<button box-="round">Ok</button>
</div>
</div>
<div class="header">
<span is-="badge" variant-="background0">bottom-left</span>
<span is-="badge" variant-="background0">bottom-right</span>
</div>
</div>
```

```CSS
.header {
display: flex;
justify-content: space-between;
}
#content {
padding: 0lh 1ch;
padding-top: 1lh;
display: flex;
flex-direction: column;
gap: 1lh;
}
#buttons {
display: flex;
justify-content: flex-end;
}
```

--------------------------------

### HTML Example of Themed WebTUI Components

Source: https://webtui.ironclad.sh/start/intro/plugins/theme-gruvbox

This HTML snippet demonstrates how various WebTUI components, including headings, badges, and buttons, are styled when the Gruvbox theme is applied. It showcases the color palette and variant attributes.

```HTML
<h1>Headings</h1>
<h2>Are</h2>
<h3>Colored</h3>
<span is-="badge" variant-="red">So</span>
<span is-="badge" variant-="green">Are</span>
<span is-="badge" variant-="yellow">All</span>
<span is-="badge" variant-="blue">The</span>
<span is-="badge" variant-="purple">Different</span>
<span is-="badge" variant-="aqua">Badge</span>
<span is-="badge" variant-="orange">Variants</span><br/>
<button variant-="green">And</button>
<button variant-="orange">The</button>
<button variant-="yellow">Buttons</button>
```

--------------------------------

### Clone Webtui Repository

Source: https://webtui.ironclad.sh/start/intro/contributing/contributing

This command clones the Webtui project repository from GitHub to your local machine, allowing you to access the source code for development. Ensure Git is installed on your system before running this command.

```bash
git clone https://github.com/webtui/webtui
```

--------------------------------

### WebTUI Catppuccin Theme Typography Examples

Source: https://webtui.ironclad.sh/start/intro/plugins/theme-catppuccin

This HTML snippet demonstrates how the Catppuccin theme styles various typography elements, including headings from `h1` to `h6`, inline links (`<a>`), and inline code (`<code>`). It highlights the specific color and underline treatments applied by the theme.

```HTML
<h1>Heading 1</h1>
<!-- ... -->
<h6>Heading 6</h6>

<p><a href="https://example.com">Link</a> <code>Inline Code</code></p>
```

--------------------------------

### Popover Baseline Positioning CSS

Source: https://webtui.ironclad.sh/start/intro/components/popover

Provides CSS for the baseline positioning examples, including layout for rows and styling for summary and popover content.

```CSS
body {
display: flex;
flex-direction: column;
gap: 1lh;
}
.row {
display: flex;
gap: 1ch;
}
summary {
background-color: var(--background1);
}
.popover-content {
background-color: var(--background1);
white-space: nowrap;
padding: 1lh 1ch;
}
```

--------------------------------

### WebTUI Catppuccin Theme HTML Elements Example

Source: https://webtui.ironclad.sh/start/intro/plugins/theme-catppuccin

This HTML snippet demonstrates various WebTUI elements styled with the Catppuccin theme, including headings, links, inline code, badges, and buttons, showcasing the theme's visual impact on common UI components.

```HTML
<h1>Lots</h1>
<h2>Of</h2>
<h3>Colored</h3>
<h4>Headings</h4>
<h5>And</h5>
<h6>Stuff</h6>
<p>And links are <a href="https://example.com">blue</a> now and <code>code</code> is red</p>
<span is-="badge" variant-="red">Many</span>
<span is-="badge" variant-="teal">Colorful</span>
<span is-="badge" variant-="mauve">Badge</span>
<span is-="badge" variant-="flamingo">Variants</span><br/>
<span is-="badge" variant-="peach">And</span><br/>
<button variant-="maroon">Sick</button>
<button variant-="rosewater">Button</button>
<button variant-="sky">Variants</button>
```

--------------------------------

### HTML Example of Gruvbox Badge Variants

Source: https://webtui.ironclad.sh/start/intro/plugins/theme-gruvbox

This HTML snippet demonstrates the additional badge variants provided by the Gruvbox theme, matching its accent colors. It shows how to apply different color variants using the `variant-` attribute.

```HTML
<span is-="badge" variant-="gray">gray</span>
<span is-="badge" variant-="red">red</span>
<!-- ... -->
<span is-="badge" variant-="aqua">aqua</span>
<span is-="badge" variant-="orange">orange</span>
```

--------------------------------

### Vertical Separator in a Flex Row Layout Example

Source: https://webtui.ironclad.sh/start/intro/components/separator

Shows an example of a vertical separator used between two text blocks, demonstrating the necessary CSS to arrange elements in a row using flexbox.

```HTML
<div is-="separator" direction-="vertical"></div>
```

```CSS
body {
  display: flex;
  flex-direction: row;
}
```

--------------------------------

### Basic Separator HTML and CSS Layout Example

Source: https://webtui.ironclad.sh/start/intro/components/separator

Demonstrates the fundamental HTML structure for a separator and the CSS required to display it within a flex container, showing how it appears between two paragraphs.

```HTML
<div is-="separator"></div>
```

```CSS
body {
  display: flex;
  flex-direction: column;
}
```

--------------------------------

### HTML Example of Gruvbox Typography Theming

Source: https://webtui.ironclad.sh/start/intro/plugins/theme-gruvbox

This HTML snippet illustrates how the Gruvbox theme styles various typography elements, including headings, links, and inline code. It demonstrates the specific color applications for each element type.

```HTML
<h1>Heading 1</h1>
<!-- ... -->
<h6>Heading 6</h6>

<p><a href="https://example.com">Link</a> <code>Inline Code</code></p>
```

--------------------------------

### HTML Separator Element Example

Source: https://webtui.ironclad.sh/start/intro/components/separator

Demonstrates the basic HTML structure for a separator element using the `is-` attribute, typically used within a flex container.

```HTML
<div is-="separator"></div>
```

--------------------------------

### HTML Example of Gruvbox Button Variants

Source: https://webtui.ironclad.sh/start/intro/plugins/theme-gruvbox

This HTML snippet illustrates the additional button variants introduced by the Gruvbox theme, aligning with its accent colors. It demonstrates how to apply different color variants to buttons using the `variant-` attribute.

```HTML
<button variant-="gray">gray</button>
<button variant-="red">red</button>
<!-- ... -->
<button variant-="aqua">aqua</button>
<button variant-="orange">orange</button>
```

--------------------------------

### HTML Badge Component Nord Theme Variants

Source: https://webtui.ironclad.sh/start/intro/plugins/theme-nord

HTML example demonstrating the usage of various `variant-` attributes for badges, mapping to the full range of Nord accent colors (`nord0` to `nord15`) for diverse visual cues.

```HTML
<span is-="badge" variant-="nord0">nord0</span>
<span is-="badge" variant-="nord1">nord1</span>
<!-- ... -->
<span is-="badge" variant-="nord14">nord14</span>
<span is-="badge" variant-="nord15">nord15</span>
```

--------------------------------

### HTML Examples of Gruvbox Theme Variants

Source: https://webtui.ironclad.sh/start/intro/plugins/theme-gruvbox

This HTML snippet showcases the various dark and light Gruvbox theme variants, including hard, medium, and soft contrast levels. Each `<html>` tag demonstrates how to specify a particular theme variant using the `data-webtui-theme` attribute.

```HTML
<!-- Dark Variants -->
<html data-webtui-theme="gruvbox-dark-hard">
  <html data-webtui-theme="gruvbox-dark-medium">
    <!-- Default: gruvbox-dark or gruvbox -->
    <html data-webtui-theme="gruvbox-dark-soft">
      <!-- Light Variants -->
      <html data-webtui-theme="gruvbox-light-hard">
        <html data-webtui-theme="gruvbox-light-medium">
          <!-- Default: gruvbox-light -->
          <html data-webtui-theme="gruvbox-light-soft"></html>
        </html>
      </html>
    </html>
  </html>
</html>
```

--------------------------------

### HTML for Checked and Unchecked Switch States

Source: https://webtui.ironclad.sh/start/intro/components/switch

This example shows how to control the initial state of the Switch component. The checked attribute is used to set a switch to its 'on' state, while its absence results in an 'off' state.

```HTML
<label>
    <input type="checkbox" is-="switch" />
    Unchecked
</label>
<label>
    <input type="checkbox" is-="switch" checked />
    Checked
</label>
```

--------------------------------

### HTML Button Component Nord Theme Variants

Source: https://webtui.ironclad.sh/start/intro/plugins/theme-nord

HTML example demonstrating the usage of various `variant-` attributes for buttons, mapping to the full range of Nord accent colors (`nord0` to `nord15`) for consistent UI elements.

```HTML
<button variant-="nord0">nord0</button>
<button variant-="nord1">nord1</button>
<!-- ... -->
<button variant-="nord14">nord14</button>
<button variant-="nord15">nord15</button>
```

--------------------------------

### CSS Layering for Component and Utility Selectors

Source: https://webtui.ironclad.sh/start/intro/contributing/style-guide

Demonstrates the use of CSS @layer blocks for organizing component and utility styles. It shows how to nest selectors within 'components' and 'utils' layers, using custom attribute selectors like '[is-~="<component-name>"]' for specific elements.

```css
@layer components {
    input[type="file"], [is-=~"fileinput"] {
        /* ... */
    }
}

@layer utils {
    [is-~="tooltip"] {
        /* ... */
    }
}
```

--------------------------------

### Extend WebTUI Tooltip CSS with Custom Variants

Source: https://webtui.ironclad.sh/start/intro/components/tooltip

Demonstrates how to extend the WebTUI Tooltip component's stylesheet by defining CSS rules within the `components` layer. This example shows how to add a custom `inverted` variant.

```css
@layer components {
    [is-~="tooltip"] {
        &[variant-="inverted"] {
            /* ... */
        }

        /* ... */
    }
}
```

--------------------------------

### Control Dialog Container Sizing with `container-` Property

Source: https://webtui.ironclad.sh/start/intro/components/dialog

Illustrates how to use the `container-` property to manage the sizing behavior of a dialog. Examples include 'auto' for automatic sizing and 'fill' for filling available space.

```HTML
<div class="row">
<dialog id="auto" container-="auto" popover>auto</dialog>
<button popovertarget="auto">auto</button>

<dialog id="fill" container-="fill" popover>fill</dialog>
<button popovertarget="fill">fill</button>
</div>
```

```CSS
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
dialog {
padding: 1lh 2ch;
background-color: var(--background1);
}
```

--------------------------------

### New Shear Property HTML Syntax

Source: https://webtui.ironclad.sh/start/intro/start/changelog

Example of the new `shear-` property, introduced in version 0.1.0, which replaces the `contain:` keyword for controlling box padding. This property provides more explicit control over top, bottom, or both padding sides.

```html
<div box-="square" shear-="top"></div>
<div box-="square" shear-="bottom"></div>
<div box-="square" shear-="both"></div>
```

--------------------------------

### Apply Nord Theme to Specific HTML Element

Source: https://webtui.ironclad.sh/start/intro/plugins/theme-nord

HTML example demonstrating how to apply the Nord theme to a specific `div` element, overriding a parent theme, using the `data-webtui-theme` attribute for localized styling.

```HTML
<html data-webtui-theme="dark">
    <body>
        <div data-webtui-theme="nord">
            <!-- ... -->
        </div>
    </body>
</html>
```

--------------------------------

### HTML Radio Input Checked/Unchecked Examples

Source: https://webtui.ironclad.sh/start/intro/components/radio

Illustrates how to display WebTUI radio inputs in both their default (unchecked) and explicitly checked states. The 'checked' attribute is used to pre-select a radio option.

```HTML
<label>
    <input type="radio" name="r" />
    Unchecked
</label>
<label>
    <input type="radio" name="r" checked />
    Checked
</label>
```

--------------------------------

### ASCII Art Logo for Some SaaS

Source: https://webtui.ironclad.sh/start/intro/examples

A large ASCII art graphic, likely serving as a logo or branding element, presented within a 'Some SaaS' context. It demonstrates the use of text-based art for visual representation.

```ASCII Art
 ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣧⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣦⣿⠂⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⡄⠀⠀⠀⢠⢰⣷⣀⢸⣿⣿⣦⠀⣿⡇⡄⢠⣦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⣄⣤⡧⠀⠀⠀⠈⢸⣿⣿⢸⣿⣿⡏⠀⣿⡀⣿⢸⣿⢠⡄⠀⠀⠀⠀⠀⠀⠀⠀
⣶⣶⣶⣶⣤⣤⣴⣶⣶⣾⣿⣷⣮⣿⣯⣥⣀⣟⡀⠘⠸⠛⠈⠂⣀⣓⣂⣀⣀⣀⣀⠀
⠉⠉⠙⠛⠛⠻⠿⠿⠿⢿⡿⢛⣿⣿⣿⡿⠛⠛⠛⠛⠛⠛⠛⠛⠛⠛⠉⠉⠉⠉
```

--------------------------------

### ASCII Box Shearing Examples

Source: https://webtui.ironclad.sh/start/intro/start/ascii-boxes

Demonstrates how to use the `shear-` attribute to remove top, bottom, or both padding edges, allowing content to overlay the box borders. Includes accompanying CSS for styling header spans.

```HTML
<!-- Shear off the top edge's padding -->
<div box-="square" shear-="top">
<div class="header">
<span>Left</span>
<span>Right</span>
</div>
Caption on Top
</div>
<!-- Shear off the bottom edge's padding -->
<div box-="square" shear-="bottom">
Caption on Bottom
<div class="header">
<span>Left</span>
<span>Right</span>
</div>
</div>
<!-- Shear off the padding of both top & bottom edges -->
<div box-="square" shear-="both">
<div class="header">
<span>Left</span>
<span>Right</span>
</div>
Caption on Top and Bottom
<div class="header">
<span>Left</span>
<span>Right</span>
</div>
</div>
```

```CSS
.header {
display: flex;
justify-content: space-between;
}
span {
background-color: var(--background0);
padding: 0 1ch;
}
```

--------------------------------

### Extend WebTUI Radio Component Styles

Source: https://webtui.ironclad.sh/start/intro/components/radio

Provides an example of how to customize or extend the WebTUI Radio component's default CSS styles. Custom rules should be defined within the `@layer components` block to ensure proper cascading and override behavior.

```CSS
@layer components {
  input[type="radio"] {
    /* ... */
  }
}
```

--------------------------------

### Control Dialog Max Size with `size-` Property

Source: https://webtui.ironclad.sh/start/intro/components/dialog

Demonstrates how to use the `size-` property to set the maximum dimensions of a dialog. Examples include 'small', 'default', and 'full' to control the dialog's overall size.

```HTML
<div class="row">
<dialog id="small" size-="small" container-="fill" popover>small</dialog>
<button popovertarget="small">small</button>

<dialog id="default" container-="fill" popover>default</dialog>
<button popovertarget="default">default</button>

<dialog id="full" size-="full" container-="fill" popover>full (esc to close)</dialog>
<button popovertarget="full">full</button>
</div>
```

```CSS
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
dialog {
padding: 1lh 2ch;
background-color: var(--background1);
}
```

--------------------------------

### Dual Cap Separator Layout Example

Source: https://webtui.ironclad.sh/start/intro/components/separator

Demonstrates the visual effect of using two values for the `cap-` attribute (e.g., `edge bisect`, `default edge`, `bisect default`) on separators within a structured flexbox layout.

```HTML
<div box-="square" class="column">
<div class="column">
<span>edge bisect</span>
<div is-="separator" cap-="edge bisect"></div>
</div>
<div class="column">
<span>default edge</span>
<div is-="separator" cap-="default edge"></div>
</div>
<div class="column">
<span>bisect default</span>
<div is-="separator" cap-="bisect default"></div>
</div>
</div>
```

```CSS
body {
  display: flex;
  flex-direction: column;
  gap: 1lh;
}
.column {
  display: flex;
  flex-direction: column;
}
div[direction-="y"] {
  height: 2lh;
}
```

--------------------------------

### Basic WebTUI Input Usage

Source: https://webtui.ironclad.sh/start/intro/components/input

This snippet demonstrates the simplest way to use the WebTUI Input component by including a basic <input> tag.

```HTML
<input />
```

--------------------------------

### Apply Gruvbox Theme to Specific Container Elements

Source: https://webtui.ironclad.sh/start/intro/plugins/theme-gruvbox

This HTML example demonstrates how to apply different Gruvbox theme variants to specific container elements within a page. This allows for localized theming, overriding a global theme for particular sections.

```HTML
<html data-webtui-theme="dark">
  <!-- Example base theme -->
  <body>
    <div data-webtui-theme="gruvbox-light-hard">
      <!-- Gruvbox light-hard styles applied here -->
    </div>
    <div data-webtui-theme="gruvbox-dark-soft">
      <!-- Gruvbox dark-soft styles applied here -->
    </div>
  </body>
</html>
```

--------------------------------

### Extend Switch Stylesheet Using CSS Layers

Source: https://webtui.ironclad.sh/start/intro/components/switch

This example illustrates how to extend the Switch component's default styling within a CSS @layer components block. This approach allows for organized and maintainable custom styles that can override or augment the component's base appearance.

```CSS
@layer components {
  input[type="checkbox"][is-="switch"] {
    /* ... */
  }
}
```

--------------------------------

### CSS Selector Scope Example

Source: https://webtui.ironclad.sh/start/intro/components/separator

Defines the scope of elements targeted by the `is-~="separator"` selector, indicating that all elements matching this pattern are affected. A generic CSS rule example is included.

```CSS
input[type="checkbox"] {
  /* ... */
}
```

--------------------------------

### Importing Box Utility Stylesheet

Source: https://webtui.ironclad.sh/start/intro/start/ascii-boxes

Shows how to import the `box.css` utility stylesheet into a project using a CSS `@import` rule.

```CSS
@import "@webtui/css/utils/box.css";
```

--------------------------------

### Customize Start and End Cap Styles for Badge

Source: https://webtui.ironclad.sh/start/intro/components/badge

This snippet demonstrates how to apply different styles to the start and end caps of a badge by providing two space-separated values to the `cap-` attribute. This allows for more complex badge shapes.

```HTML
<span is-="badge" cap-="square round">square round</span>
<span is-="badge" cap-="round ribbon">round ribbon</span>
<span is-="badge" cap-="ribbon triangle">ribbon triangle</span>
<span is-="badge" cap-="triangle slant-top">triangle slant-top</span>
<span is-="badge" cap-="slant-top slant-bottom">slant-top slant-bottom</span>
<span is-="badge" cap-="slant-bottom square">slant-bottom square</span>
```

--------------------------------

### Standard Popover Usage HTML

Source: https://webtui.ironclad.sh/start/intro/components/popover

Illustrates the standard HTML markup for implementing a popover, including the <details> element with is-="popover" and its <summary> and content <div>.

```HTML
<details is-="popover">
    <summary>Popover</summary>
    <div>Popover content</div>
</details>
```

--------------------------------

### Import WebTUI Input CSS

Source: https://webtui.ironclad.sh/start/intro/components/input

This snippet shows how to import the necessary CSS file for the WebTUI Input component into your project.

```CSS
@import "@webtui/css/components/input.css";
```

--------------------------------

### Configure Astro for Full WebTUI Library Import

Source: https://webtui.ironclad.sh/start/intro/installation/astro

To import the full WebTUI library, modify your `astro.config.mjs` file to enable `noExternal` for `@webtui/css` within the Vite SSR options. This ensures proper handling of the package during server-side rendering.

```JavaScript
import { defineConfig } from 'astro/config';

export default defineConfig({
  vite: {
    ssr: {
      noExternal: ['package-name'],
    }
  }
})
```

--------------------------------

### HTML Checkbox Checked and Unchecked States

Source: https://webtui.ironclad.sh/start/intro/components/checkbox

This example illustrates how to render both an unchecked and a pre-checked HTML checkbox using the 'checked' attribute.

```HTML
<label>
<input type="checkbox" />
Unchecked
</label>
<label>
<input type="checkbox" checked />
Checked
</label>
```

--------------------------------

### Import Tooltip CSS Component

Source: https://webtui.ironclad.sh/start/intro/components/tooltip

Shows how to import the necessary CSS file for the Tooltip component from the @webtui library, making its styles available for use in your project.

```CSS
@import "@webtui/css/components/tooltip.css";
```

--------------------------------

### Pre Component Basic Usage

Source: https://webtui.ironclad.sh/start/intro/components/pre

Shows the standard HTML markup for using the Pre component to render preformatted content.

```HTML
<pre>This is preformatted text</pre>
```

--------------------------------

### Importing WebTUI CSS Modules

Source: https://webtui.ironclad.sh/start/intro/index

Shows how to import WebTUI's base, utility, and component CSS modules. This modular approach allows users to include only the necessary styles, ensuring a lightweight build.

```CSS
@import "@webtui/css/base.css";

/* Utils */
@import "@webtui/css/utils/box.css";

/* Components */
@import "@webtui/css/components/typography.css";
@import "@webtui/css/components/button.css";
@import "@webtui/css/components/badge.css";
```

--------------------------------

### Import Switch Component Stylesheet

Source: https://webtui.ironclad.sh/start/intro/components/switch

This CSS snippet demonstrates how to import the necessary stylesheet for the Switch component. Including this import ensures that the component's default styling is applied correctly.

```CSS
@import "@webtui/css/components/switch.css";
```
Tokens:
Raw