Skip to content

Latest commit

 

History

History

nprogress-bar

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
nprogress-bar.tsx
nprogress-bar.tsx
 
 
readme.md
readme.md
 
 
registry.json
registry.json
 
 

readme.md

title
NProgress Bar

NProgress Bar

This is a wrapper component for next-nprogress-bar. Go for more details: https://next-nprogress-bar.vercel.app/

Install

bunx shadcn add https://ui.tealight.uk/r/nprogress-bar

Usage

Add the NProgressBar component to your layout component /app/layout.tsx.

import { NProgressBar } from "@/components/ui/nprogress-bar"

fucntion Layout({ children }) {
    return <html>
        <body>
            {children}
            <NProgressBar />
        </body>
    </html>
}
  • default color is shadcn --primary css var
  • default height is 4px

You can customize the color and height by passing props to the NProgressBar component.

<NProgressBar color="hsl(var(--border))" height="6px" />

Use rgb color

<NProgressBar color="#000000" />