UI

Look like you hired a designer

The React UI library for fintech, crypto and AI products. Components, dashboards and landing pages, one shadcn command each.

BTC-USD

67,412.5

Spread 1.0

20406066,738.467,075.467,412.5 Mid67,749.668,086.6
Depth Chart
AAPL+0.8%MSFT+1.2%NVDA+3.1%GOOGL−0.6%AMZN+1.5%META−1.2%AVGO+2.2%TSLA−2.4%JPM+0.3%V+0.1%WMT−0.4%XOM−1.1%UNHMAHDPG
MSFT Microsoft
Price$441.20
Change+1.20%
Cap$3.10T
Market Heatmap
−40%−20%0%20%40%60%80%10%20%30%40%50%60%Return, 1yVolatility
JPMJPMorgan Chase
Volatility19.8%
Return+24.2%
Scatter Plot
Price targetAAPL

$232.00

+30.0%high target of 9 analysts

$160$180$200$220Jul 2025Jan 2026NowJul 2027
Price Target Fan

Dashboards

All 9 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 app looks developer built.

    It works, and 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.

For most screens, yes. The components and full dashboards already make the design calls: what reads first, how numbers line up, how each state looks. For a screen that still needs a designer's eye, I can design it with you.

Yes. Swap your parts for the matching components one at a time, starting with the screen your users find hardest to read. Each one is plain source in your repo, so nothing forces a rewrite.

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

Build the screen your users make decisions on.