 Search
components/badge: Badge components/button: Button components/checkbox: Checkbox components/dialog: Dialog components/input: Input components/popover: Popover components/pre: Pre components/radio: Radio components/separator: Separator components/switch: Switch components/table: Table components/textarea: Textarea components/tooltip: Tooltip components/typography: Typography plugins/plugin-nf: Nerd Font Plugin plugins/theme-catppuccin: Catppuccin Theme plugins/theme-gruvbox: Gruvbox Theme plugins/theme-nord: Nord Theme start/changelog: Changelog start/ascii-boxes: ASCII Boxes start/intro: Introduction start/intro: ## Features start/plugins: Plugins start/plugins: ## Official Plugins start/plugins: ### Themes start/plugins: ## Community Plugins contributing/contributing: Contributing contributing/contributing: ## Local Development contributing/contributing: ## Issues contributing/contributing: ## Pull Requests contributing/style-guide: Style Guide contributing/style-guide: ## CSS Units contributing/style-guide: ## Selectors contributing/style-guide: ## Documentation plugins/plugin-dev: Developing Plugins plugins/plugin-dev: ### Style Layers start/tuis-vs-guis: TUIs vs GUIs start/tuis-vs-guis: ## Monospace Fonts start/tuis-vs-guis: ## Character Cells installation/nextjs: Next.js installation/vite: Vite start/theming: Theming start/theming: ## CSS Variables start/theming: ### Font Styles start/theming: ### Colors start/theming: ### Light & Dark start/theming: ## Theme Plugins start/installation: Installation start/installation: ## Installation start/installation: ## Using CSS start/installation: ## Using ESM start/installation: ## Using a CDN start/installation: ## Full Library Import start/installation: ### CSS start/installation: ### ESM start/installation: ### CDN installation/astro: Astro installation/astro: ## Scoping installation/astro: ### Frontmatter Imports installation/astro: ### <style> tag installation/astro: ### Full Library Import

Changelog

0.1.1

  • Adds the Switch Component
  • Adds a half-block height variant to the Pre Component so it doesn’t appear so tall
  • Tooltips remain visible when you hover over their content

Migration Guide from 0.1.0

Pre Size

The default size for pre elements has been changed to make them shorter

<pre size-="small">Small</pre>
<pre>Default</pre>
<pre size-="large">Large (old default)</pre>
body {
  display: flex;
  flex-direction: column;
  gap: 1ch;
}

0.1.0

Migration Guide from 0.0.x

Box Containment

In versions prior to 0.1.0, a second keyword was added to the box- utility property to control whether the box should pad the top and/or bottom lines

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

This has been replaced with the shear- property

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

Since the selector for box- no longer allows more than one keyword, most elements using the box- utility will be affected by this change

Button Variants

The default button variant has been changed to make the button shorter

<button size-="large">Large (old default)</button>
<button>Default</button>
<button size-="small">Small</button>
body {
  display: flex;
  align-items: flex-start;
  gap: 1ch;
}

The default button variant is still three lines tall but appears to be shorter as its background doesn’t take up the full height of three lines

0.0.6

  • Added the Separator Component
  • Added the Radio Component

0.0.5

  • Fixed black lines between badges
  • Split out nerd font plugin to only provide the font

0.0.4

  • Introduced Checkbox Component

0.0.3

  • Introduced Popover Component

0.0.2

  • Introduced Dynamic Theme Approach

0.0.1

  • Initial Release