Anchor Buttons

bash
npx nb8 add anchor-button

For buttons with external links. Supported URIs: 'http:', 'https:', 'mailto:','tel:'

js
<AnchorButton label="Open in Github" color={AppColors.github} url='https://github.com/himanshubalani/nb8' />
<AnchorButton label="Docs" color={AppColors.darkPurple} onClick={() => {}} />
<AnchorButton label="Do Something" onClick={() => console.log('clicked')} />
<AnchorButton label="Email me at hello@himanshubalani.com" fullWidth={true} color={AppColors.skyBlue} url='mailto:hello@himanshubalani.com' onClick={() => {}} />

Buttons

bash
npx nb8 add button

Simple buttons

js
<Button width="w-40" height="h-16" color={AppColors.lightPink}>
  Click Me
</Button>
<Button width="w-40" height="h-12" color={AppColors.lightPeach}>
  Projects
</Button>

Browser

bash
npx nb8 add browser

A browser container with a header bar.

about me

I'm a Neo-Brutalist component living in a React world. This box handles its own overflow and styling. Images work too.

Example image
js
<Browser headerText="about me" headerColor={AppColors.coralRed} hover={true}>
                <p className="font-outfit text-sm">
                  I'm a Neo-Brutalist component living in a React world.
                  This box handles its own overflow and styling. Images work too.
                </p>
                <img src="https://picsum.photos/500" alt="Example image" />
              </Browser>

Badges

bash
npx nb8 add badge

Small tags for skills, languages, or status.

ReactTypeScriptTailwindDesign
js
<Badge  text="React" size='lg' />
<Badge text="TypeScript" />
<Badge text="Tailwind" />
<Badge text="Design" size="sm" />

Project Cards

bash
npx nb8 add project-card

Complex card component with image, description and action.

NeoBrutal

NeoBrutal

A design framework that embraces the aesthetics of neo-brutalism in web development.

Made using:ReactTailwindTypeScript
View Source
js
<ProjectCard 
  projectName="NeoBrutal"
  description="..."
  imagePath="..."
  projectLink="#"
  languages={['React', 'Tailwind']}
  buttonText="View Source"
/>

Simple Cards

bash
npx nb8 add simple-card

Used for work experience or history.

Senior Engineer

Tech Corp

2020 - Present

React, Node, AWS

Frontend Dev

Startup Inc

2018 - 2020

Vue, Firebase

js
<SimpleCard 
company="Tech Corp"
role="Senior Engineer"
duration="2020 - Present"
tech="React, Node, AWS"
color={AppColors.lightTeal}
/>
<SimpleCard 
company="Startup Inc"
role="Frontend Dev"
duration="2018 - 2020"
tech="Vue, Firebase"
color={AppColors.paleYellow}
/>

Code Blocks

bash
npx nb8 add code-block

Used for displaying code snippets.

+
+
html
<p> This is a CodeBlock. You can specify the programming language and a button to copy the code as well </p>
html
<p> This is also a CodeBlock. This has Copy disabled. You can specify the programming language. </p>
html
<CodeBlock language='html' copy={false} code='<p> This is a CodeBlock for CodeBlock. Refer this to know how to add this component. This has Copy disabled.'></CodeBlock>'>

Image Polaroid

bash
npx nb8 add polaroid

Show beautiful images in a polaroid

Polaroid Example
js
<Polaroid src='https://picsum.photos/300/400' alt='Polaroid Example' />

ProgressBar

bash
npx nb8 add progress-bar

Get feedback in form of Progress

75%
js
<ProgressBar 
  value={75} 
  progressColor="#f48372" 
  height={24}
/>