Getting started

So you've decided to go down this path, huh? Then let's get started with Nitpick UI!

Using your favourite package manager, add NPUI to your project:

 bash
npm install nitpick-ui tailwindcss

# or, yarn
yarn add nitpick-ui tailwindcss

# or, pnpm
pnpm add nitpick-ui tailwindcss

# or, bun :)
bun add nitpick-ui tailwindcss

Open your global css file (globals.css
in Next.js by default) and add the following:

 css
@import 'tailwindcss';
@source '../../node_modules/nitpick-ui/dist/';
@import '../../node_modules/nitpick-ui/dist/default-theme.css';
@import '../../node_modules/nitpick-ui/dist/index.css';

You should now be able to use the NPUI components in your project. Try importing a button into your page:

 tsxpage.tsx
import { Button } from 'nitpick-ui/client';
export default function Page() {
  return (
    <div>
      <Button>Click me!</Button>
    </div>
  );
}

Icons

NPUI uses Tabler Icons for its icons. You can install them using your package manager of choice:

 bash
npm install @tabler/icons-react

# or, yarn
yarn add @tabler/icons-react

# or, pnpm
pnpm add @tabler/icons-react

# or, bun :)
bun add @tabler/icons-react

Then, you can import the icons you need in your components:

 tsxpage.tsx
import { Button } from 'nitpick-ui/client';
import { IconPlus } from '@tabler/icons-react';

export default function Page() {
  return (
    <div>
      <Button icon={<IconPlus />}>Add item</Button>
    </div>
  );
}

If you prefer other icon libraries (Lucide, Material, etc) you can of course use them, these are just a design choice on my part. Stylistically and functionally you should be able to bring any icon library with minimal changes to your code.