Complete Business Owner UX

If you’re interested in launching embedded accounting in 24 hours with zero developer effort, please see Tight Ready-to-Launch Accounting. <TightApp /> is an all-in-one component that delivers the complete Tight embedded experience: every page, with built-in navigation. Use it when you want the full experience as a drop-in solution.

Looking to embed individual pages instead? See Embedding.

Installation

TightApp ships in Tight’s React Component Library:

npm install @tight-embedded/react@latest

pnpm add @tight-embedded/react@latest

Usage

Unlike individual page components, TightApp does not require the <Tight> provider. Pass your accessToken and target environment directly:

AccountingApp.tsx

import { TightApp } from "@tight-embedded/react";
import "@tight-embedded/react/index.css";

function AccountingApp({ accessToken }) {
    return (
      <TightApp environment="SANDBOX" accessToken={accessToken} />
    )
}

You can obtain an applicable accessToken via the Tight Authentication Endpoint.

The ESLint rule no-unresolved might warn that @tight-embedded/react/index.css does not exist.Disable the lint rule on the import line, or import from @tight-embedded/react/dist/index.css directly. Please note that the direct path might change in future versions.

Props

string

required

Bearer token used to authenticate API requests. Get one from the Tight Authentication Endpoint.

"PRODUCTION" | "SANDBOX"

default:"PRODUCTION"

Selects the Tight API environment. Use "SANDBOX" for development and testing.

NavState

The page that opens on initial render. Defaults to the Financial Overview. An object that contains the page field.Available options: FinancialOverview, TransactionsDashboard, BanksAndIntegrations, ExpenseDashboard, IncomeDashboard, ReportDashboard, GeneralLedger, ChartOfAccounts

Set the initial page

By default, TightApp opens on the Financial Overview. Use initialNav to open a different page on first render:

AccountingApp.tsx

import { TightApp } from "@tight-embedded/react";
import "@tight-embedded/react/index.css";

function AccountingApp({ accessToken }) {
    return (
      <TightApp
        environment="SANDBOX"
        accessToken={accessToken}
        initialNav={{ page: "FinancialOverview" }}
      />
    )
}

Get Started

React Components

React Native Components

Plain Javascript

Full End-to-end App

Complete Business Owner UX

Installation

Usage

Props

Set the initial page

​Installation

​Usage

​Props

​Set the initial page

Installation

Usage

Props

Set the initial page