Command Palette

Search for a command to run...

Loading component...

Components free Breakpoint indicator

Breakpoint indicator

Development tool showing current Tailwind CSS breakpoint for responsive design. Features a visual indicator that displays the current breakpoint and helps with responsive development.

Dependencies

tailwindcss

Interaction Type

try resizing the browser
Observe breakpoint indicator

with shacn cli3.0

//components.json
  "registries": {
    "@skiper-ui": "https://skiper-ui.com//registry/{name}.json"
  }
npx shadcn add @skiper-ui/skiper65

OR with old shacncli

 npx shadcn@latest add https://skiper-ui.com/registry/skiper65.json

why its soo helpful

The first thing i do before starting a new project is to add this component to the layout.tsx so i can see the current breakpoint and adjust the design accordingly. and the best part if i forget to remove it in production with vercel automaticaly removes it as its in the production build.

How to use

import { BreakpointIndicator } from "@/components/v1/skiper65";

const Layout = ({ children }) => {
  return (
    <main>
      <BreakpointIndicator className="fixed bottom-0 left-0" />
      {children}
    </main>
  );
};

Source code

Click on the top right
to view the source code

Keep in mind

Most components here are recreations of the best out there. I don't claim to be the original creator. This is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone, but if I missed something, let me know.

Contact

Additionlly, if you find any bug or issue, feel free to
Drop a dm.

License & Usage:

  • Free to use and modify in both personal and commercial projects.
  • Attribution to Skiper UI is required when using the free version.
  • No attribution required with Skiper UI Pro.
PreviousNext