Getting started with @nerdfishui

A custom component library built with React and TailwindCSS to help streamline proof of concept development and provide visually pleasing and functional components.

Install

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

npm install @nerdfish/theme @nerdfish/tailwind-config @nerdfish/ui @nerdfish/utils postcss tailwindcss @tailwindcss/typography @heroicons/react

Configuration

The theme of this library depends on the @tailwindcss/typography plugin. To use it, follow the steps on the plugin source page. https://github.com/tailwindlabs/tailwindcss-typography

//tailwind.config.js
module.exports = {
  mode: 'jit',
  content: [
    // ... paths that use tailwind
    './node_modules/@nerdfish/**/*.{js,ts,jsx,tsx}', // path to nerdfishui
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@nerdfish/tailwind-config'),
  ],
}

//postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

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

//styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Usage

//AppProviders.js
import {ThemeProvider, H1} from '@nerdfish/ui'
import * as React from 'react'
import '@nerdfish/theme/dist/nerdfishui.css'
 
function App() {
  return (
    <ThemeProvider>
      <H1>Hello {`<°))>{`}</H1>
    </ThemeProvider>
  )
}