UI

Components for dashboards full of numbers

Charts, tables and full dashboards for fintech and data products. Add any of them with one shadcn line.

Dashboards

All 7 dashboards

Landing pages

All 4 landing pages

Easy to implement

Every component installs with one shadcn line. Paste it into the tool you already build with and the source lands in your repo.

Claude Code

Paste the line in the terminal and the source lands in your repo.

$ claude
✓ components/ui/market-heatmap.tsx
✓ +288 lines, on your tokens
❯ shadcn@latest add @ssych/market-heatmap
Codex

Give it the same line as a task and it comes back as a pull request.

Add the Market Heatmap
acme/trading-desk · main
market-heatmap.tsx+288 −8
+ export function MarketHeatmap() {
<main>
− <OldGrid />
+ <MarketHeatmap />
Ready to reviewCreate PR
v0

Paste it in the v0 chat and the component shows up in your project.

Thought for 12s
✓Created
components/market-heatmap.tsx
✓ Edited app/page.tsx
Preview updated ↗
Real code, ready to ship

React and Tailwind on shadcn conventions. Every component is source in your repo, yours to edit.

market-heatmap.tsx
1import { useMemo, useRef, useState } from "react"
2import { motion, useReducedMotion } from "motion/react"
3import { cn } from "@/lib/utils"
4
5export interface MarketHeatmapProps {
6data?: HeatmapCo[]
7title?: string
8}
9
10export function MarketHeatmap({ data, title }) {
11const reduce = useReducedMotion()
12const [active, setActive] = useState(null)
One line to install

The same command works in any project already set up with shadcn. No wrapper package and no runtime dependency on me.

Terminal
$ npx shadcn@latest add @ssych/market-heatmap
✔ Checking registry.
✔ Installing dependencies.
✔ Created 1 file:
- components/ui/market-heatmap.tsx

Who is it for?

ssych ui is for teams building trading, crypto and AI products whose screens do a lot and are hard to read. It is for you if one of these sounds familiar.

  • Your screens read like a list.

    Every number gets the same weight, so nothing stands out.

  • You narrate every demo.

    Users only understand the screen when you are there to explain it.

  • Your product looks developer built.

    It works, and it looks like nobody designed it.

  • You keep adding features.

    Each one lands somewhere new, and the product gets harder to use.

Or I do it with you.

If you explain your screens in every demo, show me one. I design it and build a working prototype, your engineers take it from there.

Questions, answered

A React component library for dark, data-dense products: trading terminals, dashboards and AI operator screens. Components install with the shadcn CLI into your own project, so you own the source.

Most components are free to install and use. Composed screens, the full dashboards and the React landing page templates are paid, and a paid plan unlocks all of them.

Run the shadcn CLI command shown on the component page. It writes the source into your project, where you can edit it like any other file of yours.

Yes. It uses the same registry format, the same token conventions and the same class utilities, so components drop in without a theme rewrite.

Yes. Installed components can be used in client and commercial projects. Paid screens and templates are licensed per account rather than resold as a template of your own.

Build the screen your users make decisions on.