Skip to main content

​
Get Started

Every Tight React Page supports desktop web, mobile web, and all breakpoints in between
Each Page is shipped in Tight’s React Component Library, which can be installed as follows: 
npm install @tight-embedded/react@latest
Once imported, you’ll need to ensure that every Embeddable UI component is rendered in a React Tree wrapped with a <Tight> component. This is all you need to get going:
HomeDashboard.tsx
import { BusinessOwnerDashboard, Tight } from "@tight-embedded/react";
import "@tight-embedded/react/index.css";

function HomeDashboard({ accessToken }) {
    return (
      <Tight environment="SANDBOX" accessToken={accessToken} >
        <BusinessOwnerDashboard />
      </Tight>
    )
}
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.
Tight recommends adding a single <Tight> component towards the top of your application tree for maintainability. The <Tight> component’s environment property can be "PRODUCTION" or "SANDBOX", depending on the environment you’d like to target. You can obtain an applicable accessToken via the Tight Authentication Endpoint.

​
Embed with AI (MCP)

The Tight Model Context Protocol (MCP) server provides tools that AI agents can use to embed end-to-end accounting utilizing Tight’s documentation. See the Build with AI (MCP) guide for instructions and examples.