 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

Developing Plugins

The requirements for developing a plugin are very simple:

  1. Must export one or more CSS stylesheets
  2. Must be available on the NPM registry
  3. All utility and/or component variant attributes must be suffixed with -
  4. Uses the correct CSS @layer(s)

Style Layers

  • The base layer is reserved for base styles such as colors, fonts, and other variables
  • The utils layer is reserved for utility attributes
  • The components layer is reserved for styling elements and components

To define styles for a specific layer, use the CSS @layer at-rule [MDN Reference]

@layer base {/* ... */}
@layer utils {/* ... */}
@layer components {/* ... */}