FAQ

General

What is the Trading Dashboard Kit?

A production-ready Next.js template with 39 screens for building a trading and investment dashboard. It includes a portfolio tracker, order management, market screener, stock research, social trading, risk analytics, backtesting, and settings pages -- all built with Tailwind CSS v4 and shadcn/ui. It is a frontend UI kit, not a live trading platform.

What tech stack does it use?

Next.js 16, React 19, Tailwind CSS v4 with oklch tokens, shadcn/ui components, TypeScript, Recharts for charts and visualizations, react-resizable-panels for layout panels, Lucide React for icons, next-themes for dark mode, and sonner for toast notifications.

Does it include real market data or live trading?

No. The kit is frontend-only. All pages use mock data from data/seed.ts and data/seed-social.ts. Replace with API calls to a market data provider (Alpha Vantage, Polygon.io, Finnhub) or brokerage API (Alpaca, Interactive Brokers) when building your product.

Is a backend included?

No. The kit is frontend-only. All pages use seed data. Replace with API calls, a brokerage integration, or database queries when building your product. See the Customization guide for integration examples.

How many screens are included?

39 screens across 11 sections: Dashboard (1), Watchlist (1), Portfolio (6), Trading (5), Markets (4), Research (4), Social (4), Analytics (3), Settings (5), Auth (3), and Utility (4).

Licensing

What license types are available?

Each purchase includes a license for either Solo (1 developer), Team (up to 5 developers), or Agency (unlimited developers + client delivery). See the product page for pricing details.

Can I use this for client projects?

With the Agency license, yes -- you can use the kit in unlimited client projects. The Solo and Team licenses are for your own products only.

Can I resell this template?

No. The license permits use in end products but does not allow redistribution or resale of the template itself, whether modified or unmodified.

Technical

Can I connect this to a real brokerage?

Yes. Replace the seed data imports in your page components with API calls to Alpaca, Interactive Brokers, TD Ameritrade, or any brokerage that provides an API. The component interfaces accept standard props (ticker, price, quantity, side), so you map your brokerage schema to the existing types. See the Customization guide for integration examples.

Can I add real-time data via WebSockets?

Yes. The kit's component architecture supports real-time updates. Create a custom hook (e.g., useMarketStream) that connects to your data provider's WebSocket API and updates component state. The charts, watchlist, order book, and positions table all accept data via props and will re-render when data changes.

Does it work with existing Next.js projects?

Yes. Copy components/, data/, and types/ directories into your project. Install dependencies and import the design tokens from globals.css. See the Installation guide for details.

Can I add internationalization (i18n)?

Not out of the box. The template uses English strings. To add i18n, integrate next-intl or react-i18next and replace hardcoded strings with translation keys.

Can I use npm instead of pnpm?

Yes. All three package managers work. The kit ships with a pnpm-lock.yaml but you can use npm install or yarn install instead.

How do I add new shadcn/ui components?

The kit is compatible with the shadcn/ui CLI:

npx shadcn@latest add <component-name>

Components install to components/ui/ and integrate seamlessly with the existing design tokens.

How does dark mode work?

The kit uses next-themes for theme switching with class-based dark mode. All design tokens have light and dark mode values defined using oklch color functions in globals.css. Use the ThemeToggle component in the header to switch themes. Every screen, chart, and component adapts automatically.

Can I add real charting with TradingView?

Yes. The price chart components in the research module can be replaced with TradingView's lightweight charting library. Install lightweight-charts and swap the Recharts-based PriceChart component with TradingView's createChart API for professional-grade interactive charting.

Is the options chain functional?

The options chain table displays mock data with realistic Greeks (delta, gamma, theta, vega) and strike prices. To make it functional, connect to an options data provider like CBOE, Polygon.io, or your brokerage's options API and map the data to the existing OptionContract type.

Support

How do I get support?

Email support@thefrontkit.com or visit the Support page.

What's the refund policy?

7-day money-back guarantee, no questions asked.

How do I report bugs?

Email the details to support@thefrontkit.com with steps to reproduce, browser version, and screenshots if applicable. We will address it in the next update.