> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tight.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tight Embeddable UI

> Embed modern, flexible, and performance-optimized accounting components

<Tip>You can simply link this doc to your orchestration agent to embed Tight's UI into your platform overnight. </Tip>

<img src="https://mintcdn.com/tight-7c882d74/9Zve3N5hTi3ECbMk/embeddable-ui/gifs/transactionsDashboard/tightTransactionsDashboard.gif?s=bb4d3c48992c2866a9031b53962415cf" alt="Transaction Dashboard Demo" width="1067" height="600" data-path="embeddable-ui/gifs/transactionsDashboard/tightTransactionsDashboard.gif" />

## Flexible embed options

<CardGroup cols={2}>
  <Card title="Embed using AI (MCP)" icon="sparkles" href="/ai/mcp-tools/embedding-and-integration-mcp">
    Connect Tight's MCP Server to your dev workflow to embed overnight
  </Card>

  <Card title="React Components" icon="react" href="/embeddable-ui/react/patterns/embedding">
    Embed fully-responsive components into your React app
  </Card>

  <Card title="React Native Components" icon="mobile-screen" href="/embeddable-ui/react-native/patterns/embedding">
    Embed mobile-first features like mileage tracking using React Native
  </Card>

  <Card title="Javascript SDK" icon="js" href="/embeddable-ui/plain-js/patterns/embedding">
    Explore the Tight Embedded UX in the Playground
  </Card>

  <Card title="Ready-to-Launch App" icon="rocket-launch" href="/guides/launch-paths/ready-to-launch">
    Launch without development via a simple DNS configuration
  </Card>

  <Card title="Explore the Playground" icon="umbrella-beach" href="/playground">
    Explore the Tight Embedded UX in the Playground
  </Card>
</CardGroup>

## Modern design philosophy

Tight's embeddable components are designed to be customized to fit into *your* platform such that your users would never know they were created by a third party. There are a few different approaches to nailing your UI design:

1. Tight can do the white labelling design and implementation for you (see some [example white-labellings of popular SaaS platforms](/embeddable-ui/tight-embeddable-ui#custom-white-labellings) below). Simply send Tight's design team your Figma design system or send Tight a demo account login to your platform.
2. Or, you can utilize [Tight's innovative design token system](/embeddable-ui/react/reference/design-tokens) to override via CSS

## Custom white-labellings

<img src="https://mintcdn.com/tight-7c882d74/9Zve3N5hTi3ECbMk/embeddable-ui/gifs/financialOverview/gustoFinancialOverview.gif?s=1e36948a212f24a471596624be70d256" alt="Desktop Financial Overview for Popular Payroll Provider" width="1067" height="600" data-path="embeddable-ui/gifs/financialOverview/gustoFinancialOverview.gif" />

<div style={{ display: "flex", gap: "16px", alignItems: "flex-start", flexWrap: "wrap", justifyContent: "space-between" }}>
  <img src="https://mintcdn.com/tight-7c882d74/9Zve3N5hTi3ECbMk/embeddable-ui/gifs/financialOverview/gustoMobileFinancialOverview.gif?s=b936f8489a80601b07fb657dfb608ce9" alt="Mobile Financial Overview for Popular Payroll Provider" style={{ width: "31%", minWidth: "200px", maxWidth: "100%" }} width="277" height="600" data-path="embeddable-ui/gifs/financialOverview/gustoMobileFinancialOverview.gif" />

  <img src="https://mintcdn.com/tight-7c882d74/9Zve3N5hTi3ECbMk/embeddable-ui/gifs/expenseDashboard/gustoMobileExpenseDashboard.gif?s=5ab9c7da0810ceb39ce294552c6354dd" alt="Mobile Expense Dashboard for Popular Payroll Provider" style={{ width: "31%", minWidth: "200px", maxWidth: "100%" }} width="277" height="600" data-path="embeddable-ui/gifs/expenseDashboard/gustoMobileExpenseDashboard.gif" />

  <img src="https://mintcdn.com/tight-7c882d74/9Zve3N5hTi3ECbMk/embeddable-ui/gifs/transactionsDashboard/toastTransactionsDashboard.gif?s=b588e32f17d963779ed4162c6c44fd71" alt="Desktop Transactions Dashboard for Popular Restaurant VSaaS" style={{ width: "31%", minWidth: "200px", maxWidth: "100%" }} width="277" height="600" data-path="embeddable-ui/gifs/transactionsDashboard/toastTransactionsDashboard.gif" />
</div>