Breakpoints Badge Preset for UnoCSS

Shows which UnoCSS breakpoint state the page is in with a badge

---

Install

# Using npm
npm install unocss-preset-breakpoints

# Using yarn
yarn add unocss-preset-breakpoints

# Using pnpm
pnpm add unocss-preset-breakpoints

# Using bun
bun add unocss-preset-breakpoints

Usage

// unocss.config.js
import { defineConfig } from "unocss"
import { presetBreakpoints } from "unocss-preset-breakpoints"

export default defineConfig({
  presets: [
    // ...
    presetBreakpoints()
  ]
})

Type of BreakpointsOptions

export interface BreakpointsOptions {
  /**
   * The prefix to use for the badge
   * @default "statu-"
   */
  prefix?: string

  /**
   * Determines whether the breakpoints badge should be shown or not.
   * @default false
   */
  show?: boolean
}