# @bigbinary/neeto-themes-frontend

> A repo acts as the source of truth for the new nano's structure, configs, data etc.

Latest version **4.0.37** (published 2026-09-11) · UNLICENSED license · 0 weekly downloads

## Install

```sh
npm install @bigbinary/neeto-themes-frontend
pnpm add @bigbinary/neeto-themes-frontend
yarn add @bigbinary/neeto-themes-frontend
bun add @bigbinary/neeto-themes-frontend
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 4.0.37 |
| Published | 2026-09-11 |
| First published | 2024-05-07 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=22.13 |
| Dependencies | 2 |
| Unpacked size | 3.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | BigBinary |
| Maintainers | neerajdotname, bigbinarybot, neetohq |

## Links

- npm: https://www.npmjs.com/package/@bigbinary/neeto-themes-frontend
- Repository: neeto-themes-nano
- Homepage: https://github.com/bigbinary/neeto-themes-nano
- Issues: https://github.com/bigbinary/neeto-themes-nano/issues
- npm.io page: https://npm.io/package/@bigbinary/neeto-themes-frontend

## Dependencies (2)

- [react-router-nav-prompt](https://npm.io/package/react-router-nav-prompt.md) 0.4.1
- [babel-plugin-transform-imports](https://npm.io/package/babel-plugin-transform-imports.md) ^2.0.0

## Recent versions

- 4.0.37 (latest) — 2026-09-11
- 4.0.2-beta (beta) — 2025-11-26
- 4.0.36 — 2026-07-31
- 4.0.35 — 2026-07-31
- 4.0.34 — 2026-07-30
- 4.0.33 — 2026-07-10
- 4.0.32 — 2026-07-01
- 4.0.31 — 2026-07-01
- 4.0.30 — 2026-06-30
- 4.0.29 — 2026-06-29
- 4.0.28 — 2026-06-26
- 4.0.27 — 2026-06-26
- 4.0.26 — 2026-06-26
- 4.0.25 — 2026-06-19
- 4.0.24 — 2026-06-17
- … 110 more at https://npm.io/package/@bigbinary/neeto-themes-frontend/versions

## README

# neeto-themes-nano

The `neeto-themes-nano` allows us to build and use themes within neeto
applications. This nano exports `@bigbinary/neeto-themes-frontend` NPM package
and `neeto-themes-engine` Rails engine.

## Contents

1. [Development with Host Application](#development-with-host-application)
   - [Engine](#engine)
     - [Installation](#installation)
     - [Usage](#usage)
   - [Frontend package](#frontend-package)
     - [Installation](#installation-1)
     - [Instructions for development](#instructions-for-development)
     - [Usage](#usage-1)
2. [Instructions for Publishing](#instructions-for-publishing)

## Development with Host Application

### Engine

#### Installation

1. Add this line to your application's Gemfile:

   ```ruby
    source "NEETO_GEM_SERVER_URL" do
      # ..existing gems

      gem 'neeto-themes-engine'
    end
   ```

2. And then execute:

   ```shell
   bundle install
   ```

3. Add this line to your application's `config/routes.rb` file

   ```ruby
    mount NeetoThemesEngine::Engine, at: "/neeto_themes"
   ```


4. Add required migrations in the `db/migrate` folder. Run the following
   commands to copy the migrations from the engine to the host application.

   ```shell
   bundle exec rails neeto_themes_engine:install:migrations
   bundle exec rails db:migrate
   ```

5. Add the following line to `models/organization.rb` file.

   ```ruby
   has_many :themes, class_name: "NeetoThemesEngine::Theme", as: :owner
   ```

6. Configure model to add below association to attach theme.

   ```ruby
   has_one :theme_entity, as: :themeable, class_name: "NeetoThemesEngine::ThemeEntity", dependent: :destroy
   has_one :theme, through: :theme_entity, class_name: "NeetoThemesEngine::Theme"
   ```

### Usage

1. **Create an engine initializer**

   Create a file named `neeto_themes_engine.rb` in the `config/initializers`
   folder.

2. **Customize theme schema**

   The engine supports customizing theme schemas based on the needs of the host
   application. This schema will be used in the frontend to render the theme
   properties. Eg:

   ```ruby
    NeetoThemesEngine.theme_properties_schema = [
      { kind: "color", key: "primary_color", default_value: "#2D36D4" },
      { kind: "color", key: "secondary_color", default_value: "#ECF4FF" },
    ]
   ```

   Each object in the array should have the following keys:

   - `key`: The unique identifier for the theme property.

   - `kind`: The kind of the theme property.

   Optional keys that can be included:

   - `default_value`: Sets a default value when creating a new theme.

   - `hidden`: This boolean prop helps to hide the property from the UI but
     allows to use it as CSS variable.

   - `depends_on`: Provides a dependency on other properties. If a key is
     provided, it will check for its value and only appear in the UI if the
     dependent property is present.

   - `parent_class`: This key needs to be added for custom css feature to work
     properly. See more on [custom css](#custom-css) feature.

   - `use_default_image_size`: Used to apply defaultImageSize prop passed to
     ImageUploader component.

   - `default_image_size`: Used to pass defaultImageSize prop passed to
     ImageUploader component. Should be an object with `width` and `height`
     properties.

   - `fixed_aspect_ratio`: Used to pass fixedAspectRatio prop passed to
     ImageUploader component. Should be an object with `width` and `height`
     properties.

3. **Provide a css variable prefix**

   This value will be used to prefix all CSS variables. Eg:

   ```ruby
     NeetoThemesEngine.css_variable_prefix = "neeto-cal"
   ```

   variable generated for the theme property `primary_color` will be
   `--neeto-cal-primary-color`.

4. **Provide the entities to which the theme property is attached**

   This value will be used to determine the entity to which the theme property
   is attached. We can provide multiple entities. Eg:

   ```ruby
     NeetoThemesEngine.valid_themeable_types = ["Meeting", "Booking"]
   ```

5. **Provide a default theme name** (Optional)

   This provided value will be used to identify the default theme. If not
   provided, the default theme will be named "Plain blue".

   ```ruby
     NeetoThemesEngine.default_theme_name = "My theme"
   ```

### Frontend package

#### Installation

1. Add the `neeto-themes-frontend` package to the `package.json`

   ```shell
   yarn add @bigbinary/neeto-themes-frontend
   ```

### Instructions for development

Check the
[Frontend package development guide](https://neeto-engineering.neetokb.com/p/a-d34cb4b0)
for step-by-step instructions to develop the frontend package.

### Usage

#### Components

1. Import the `NeetoThemesBuilder` component from
   `@bigbinary/neeto-themes-frontend`:

   ```javascript
   import React from "react";
   import { NeetoThemesBuilder } from "@bigbinary/neeto-themes-frontend";

   const App = () => (
     <NeetoThemesBuilder
       entityId={meeting?.id}
       entityType="Meeting"
       thumbnail={Thumbnail}
     >
       <Preview />
     </NeetoThemesBuilder>
   );

   export default App;
   ```

   **Props:**

   - `entityId` (required): The ID of the entity to which the theme is attached.
   - `entityType` (required): The type of the entity (e.g., "Meeting", "Booking").
   - `thumbnail` (required): A React component to display as the theme thumbnail.
   - `children` (required): The preview component to render.
   - `onPropertiesChange` (optional): Callback function triggered when theme properties change.
   - `defaultImageSize` (optional): Default image size for image uploads. Should be an object with `width` and `height` properties.
   - `fixedAspectRatio` (optional): Fixed aspect ratio for image uploads. Should be an object with `width` and `height` properties.
   - `helpDocUrl` (optional): URL to the help documentation.
   - `isTemplateThemesEnabled` (optional): Boolean to enable template themes feature. Default: `false`.
   - `pageTitle` (optional): Custom page title for the theme builder.
   - `onApplyThemeSuccess` (optional): Callback function triggered when a theme is successfully applied.
   - `onUpdateThemeSuccess` (optional): Callback function triggered when a theme is successfully updated.
   - `onApplyGlobalThemeSuccess` (optional): Callback function triggered when a global theme is successfully applied.
   - `helpPopoverProps` (optional): Props to pass to the help popover component.
   - `enabledFeatures` (optional): Object to control which features are enabled. Default: `{ customCSS: true }`. Set `{ customCSS: false }` to disable the Custom CSS feature.
   - `proFeatures` (optional): Object to specify which features should be marked as "pro" features. Example: `{ customCSS: true }` will mark Custom CSS as a pro feature.

#### hooks

1. Import `useThemeUtils` hook from "@bigbinary/neeto-themes-frontend"

   ```javascript
   import { useThemeUtils } from "@bigbinary/neeto-themes-frontend";

   const { setTheme, previewingTheme, currentTheme } = useThemeUtils();
   ```

- `setTheme`: This method is used to set the theme for the entity.

- `previewingTheme`: This object contains the currently previewing theme.

- `currentTheme`: This object contains the current theme which is applied to the
  entity.

### Custom CSS

`neeto-themes-nano` will inject custom css into your application as part of a
theme. You can provide `enabledFeatures={{ customCSS: false }}` in
`NeetoThemesBuilder` to manually **hide** the CustomCSS feature.
You can pair it with `proFeatures={{ customCSS: true }}` to show it *disabled*
in non-enabled cases.

This feature
requires the initializer to be set with the additional property
`{ kind: "custom_css", key: "custom_css", default_value: "", parent_class: "neeto-form-eui" }`.
The `parent_class` key will be used as a parent to inject styles and for CSS
nesting. This ensures that styles are not injected on pages where you do not
want it and also ensures that style rules targeting elements outside this class
will not be applied. Please ensure that the value provided to`parent_class`is
present in your application as a wrapper CSS class. For example:`neeto-form-eui`
in neetoForm is present in all external pages where theme needs to be applied. .
It also provides a code editor with syntax highlighting which depends on
[Monaco editor](https://github.com/suren-atoyan/monaco-react) as a peer
dependency. Please install it in the host application for proper working.

## Instructions for Publishing

TBD

Consult the
[building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages)
guide for details on how to publish.

---
_Source: https://npm.io/package/@bigbinary/neeto-themes-frontend · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._