npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

@nerdfish/react

v1.1.2

Published

Nerdfish React Components

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

darendaren

Keywords

reactreact-componentnerdfishunstyleda11y

Readme

Introducing Nerdfishui - a custom component library built with React and TailwindCSS to help streamline proof of concept development and provide visually pleasing and functional components. Nerdfishui is the perfect tool for developers who want to quickly create stunning and user-friendly interfaces.

It's an opinionated library, so you might not agree with all the design, but you can add your own styles to the components.

It's mainly radix-ui primitives with some custom styling, with strong inspiration from https://ui.shadcn.com

Usage

Install

To install the component-library run the following within your project directory.

npm install @nerdfish/react @nerdfish/utils postcss tailwindcss @tailwindcss/postcss

Configuration

//postcss.config.mjs
export { default } from '@nerdfish/react/postcss.config.mjs'

Then you need a global css file which you import at the root of the project

//styles.css
@import '@nerdfish/react/styles/global.css';
@source "../../node_modules/@nerdfish/react"; // path to nerdfishui

Portals

To make portalled components always appear on top of the entire page, add the following div element to your application layout root:

<body>
	<div className="isolate">{children}</div>
</body>

Useful Commands

  • pnpm build - Build all packages, including the docs
  • pnpm dev - Run all packages locally and preview the docs
  • pnpm checks - Lint all packages
  • pnpm changeset - Generate a changeset
  • pnpm clean - Clean up all node_modules and dist folders (runs each package's clean script)

Docs

The docs are built with NextJS and MDX. The docs are located in the apps/docs folder.

To run the docs locally, run pnpm dev from the root of the project. This will run the dev script defined in the root package.json:

pnpm dev

Versioning & Publishing Packages

This example uses Changesets to manage versions, create changelogs, and publish to npm. It's preconfigured so you can start publishing packages immediately.

You'll need to create an NPM_TOKEN and GITHUB_TOKEN and add it to your GitHub repository settings to enable access to npm. It's also worth installing the Changesets bot on your repository.

Generating the Changelog

To generate your changelog, run pnpm changeset locally:

  1. Which packages would you like to include? – This shows which packages and changed and which have remained the same. By default, no packages are included. Press space to select the packages you want to include in the changeset.
  2. Which packages should have a major bump? – Press space to select the packages you want to bump versions for.
  3. If doing the first major version, confirm you want to release.
  4. Write a summary for the changes.
  5. Confirm the changeset looks as expected.
  6. A new Markdown file will be created in the changeset folder with the summary and a list of the packages included.

Releasing

When you push your code to GitHub, the GitHub Action will run the release script defined in the root package.json:

turbo run build --ignore=docs^... && changeset publish