@nerdfish/react
Advanced tools
Nerdfish Design System
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
To install the component-library run the following within your project directory.
npm install @nerdfish/react @nerdfish/utils postcss tailwindcss @tailwindcss/postcss
//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
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>
pnpm build - Build all packages, including the docspnpm dev - Run all packages locally and preview the docspnpm checks - Lint all packagespnpm changeset - Generate a changesetpnpm clean - Clean up all node_modules and dist folders (runs each
package's clean script)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
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.
To generate your changelog, run pnpm changeset locally:
space to select the packages you want to include in the
changeset.space to select the
packages you want to bump versions for.changeset folder with the
summary and a list of the packages included.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
FAQs
Nerdfish React Components
We found that @nerdfish/react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.