Tailwind UI

The TailwindCSS integration is built on top of @labir/react. It stands on top of @nextui-org/react (opens in a new tab) library.

Installation

Follow the installation instructions of Tailwind (opens in a new tab) and NextUI (opens in a new tab).

Do not forget to hoist dependencies (opens in a new tab) if you use pnpm package manager.

tailwind.config.js

Include @labir/tailwind and @nextui-org/react to Tailwind content setting. Your config should look like this:

tailwind.config.js

const { nextui } = require("@nextui-org/react");
 
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ... your paths
    "../../node_modules/@labir/tailwind/**/*.{js,jsx,tsx}",
    "../../node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    nextui()
  ],
};

Components

From @labir/tailwind

OpacityInput
HistogramResolutionInput
PaletteDropdown
RangeAutoButton
RangeFullButton

More components coming soon

This package is in early stage of development. We plan to implement more components. For example:

modal dialogs with file information
buttons for exporting images to JPG/PNG
buttons for downloading IR files
complex layouts

From @labir/react-bridge

Most important code from @labir/react-bridge that you will need to build a fully equipped application.

ThermalProvider - for the global context
useSignleFileRegistry - for loading one file in an isolated context
useFilesInGroup - for loading multiple files in a group
many other hooks from @labir/react-bridge

Histogram Index