---
name: "@ssych"
slug: "ssych"
description: "Dark, data-dense React components for high-stakes decision surfaces: trading books, screeners, clinical dashboards. Hand-drawn SVG charts, no chart runtime."
category: "Charts/data viz"
tags: ["blocks", "buttons", "cards", "charts", "crypto", "dashboard", "hooks", "maps", "marketing", "media", "navigation", "onboarding", "retro", "tables"]
framework: "react"
license: null
author: null
website: "https://ui.ssych.com"
github: null
registry: "https://ui.ssych.com/r/registry.json"
pro: false
pro_url: null
github_stars: null
component_count: 72
generated_at: "2026-09-21T01:50:16.753Z"
---

# @ssych

Dark, data-dense React components for high-stakes decision surfaces: trading books, screeners, clinical dashboards. Hand-drawn SVG charts, no chart runtime.

## Links

- Website: https://ui.ssych.com
- Registry JSON: https://ui.ssych.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/ssych
- This file: https://sh4dcn.vercel.app/md/ssych.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ui.ssych.com/r/registry.json
pnpm dlx shadcn@latest add https://ui.ssych.com/r/registry.json
bunx shadcn@latest add https://ui.ssych.com/r/registry.json
# fetch the raw registry index
curl -s https://ui.ssych.com/r/registry.json
```

## Components (72)

| name | type | description | install |
| --- | --- | --- | --- |
| file-tree | registry:ui | A bundle read as a tree: folders fold open under the pointer or the arrow keys, one highlight glides between rows, and a quiet right-hand column says how much … | `npx shadcn@latest add https://ui.ssych.com/r/file-tree.json` |
| sidebar | registry:ui | Collapsible accordion sidebar with icon'd sections, an active rail, and socials. | `npx shadcn@latest add https://ui.ssych.com/r/sidebar.json` |
| macos-dock | registry:ui | macOS-style magnifying dock — cursor-driven icon springs, click bounce, floor reflections, running-app dots, and a ⌘K command menu. | `npx shadcn@latest add https://ui.ssych.com/r/macos-dock.json` |
| browser-window | registry:ui | Chrome / Safari mock window frame for screenshots and embeds; below 480px of its own width it becomes a phone browser with a status row, one address pill and a… | `npx shadcn@latest add https://ui.ssych.com/r/browser-window.json` |
| macbook-frame | registry:ui | Front-facing MacBook mockup — drop a screenshot, gradient, or live UI on the screen. | `npx shadcn@latest add https://ui.ssych.com/r/macbook-frame.json` |
| card-stack | registry:ui | Draggable stacked-card carousel — swipe or drag the top card, click to expand into a details modal with a floating dock. | `npx shadcn@latest add https://ui.ssych.com/r/card-stack.json` |
| card-grid | registry:ui | Responsive grid of project cards with hover-reveal actions and a shared details modal. | `npx shadcn@latest add https://ui.ssych.com/r/card-grid.json` |
| card-list | registry:ui | Vertical list of horizontal project cards with media, copy, and a shared details modal. | `npx shadcn@latest add https://ui.ssych.com/r/card-list.json` |
| bento-gallery | registry:ui | Draggable bento grid of media that expands into a shared lightbox modal with a floating dock switcher. | `npx shadcn@latest add https://ui.ssych.com/r/bento-gallery.json` |
| cutout-card | registry:ui | Media card with a scooped-out content tray (concave corners), hover-reveal action button, and gradient overlay. | `npx shadcn@latest add https://ui.ssych.com/r/cutout-card.json` |
| accordion | registry:ui | Expanding accordion rows — each reveals its body, a checklist, and a visual. | `npx shadcn@latest add https://ui.ssych.com/r/accordion.json` |
| project-card | registry:ui | Shared cutout project card with blurred-gradient media and a liquid-metal hover ring. | `npx shadcn@latest add https://ui.ssych.com/r/project-card.json` |
| historical-eps | registry:ui | Forecast-vs-reported quarterly bars — dashed forecasts, a derived Beat-by tip, and a surprise tooltip. | `npx shadcn@latest add https://ui.ssych.com/r/historical-eps.json` |
| price-target-fan | registry:ui | Analyst targets: history draws to now, dashed projections fan to High / Mean / Low, the nearest projection owns the pointer and the hot one draws solid, with a… | `npx shadcn@latest add https://ui.ssych.com/r/price-target-fan.json` |
| market-watchlist | registry:ui | Sortable quote register — trend sparklines, signed day changes, accent spine on the selected row. | `npx shadcn@latest add https://ui.ssych.com/r/market-watchlist.json` |
| sma-chart | registry:ui | Moving-average chart — price line with fast/slow SMA overlays, crosshair scrubbing with a three-series tooltip, and a signed change chip. | `npx shadcn@latest add https://ui.ssych.com/r/sma-chart.json` |
| dotted-area-chart | registry:ui | A price line standing on a field of dots that fades toward the floor. Scrubbing splits the chart at the cursor, lighting the stretch already passed and droppin… | `npx shadcn@latest add https://ui.ssych.com/r/dotted-area-chart.json` |
| health-gauge | registry:ui | A bounded single-metric dial: a 270° arc on one flat track, a value arc that draws in behind an end marker, and a centre number that counts up to it. Clicking … | `npx shadcn@latest add https://ui.ssych.com/r/health-gauge.json` |
| market-heatmap | registry:ui | The market as one block of ground: tiles sized by market cap on a hand-rolled squarified treemap, tinted on a diverging scale by the day's move. Hovering a til… | `npx shadcn@latest add https://ui.ssych.com/r/market-heatmap.json` |
| sankey-flow | registry:ui | A fund-flow diagram where income pools in one hub and fans out into uses, node and ribbon thickness standing for amount. Flow is conserved through the middle, … | `npx shadcn@latest add https://ui.ssych.com/r/sankey-flow.json` |
| donut-chart | registry:ui | Allocation as a ring rather than a pie: the stroke is a band around an open centre that the total sits in. Slices sort descending, ring and legend cross-highli… | `npx shadcn@latest add https://ui.ssych.com/r/donut-chart.json` |
| balance-header | registry:ui | A wallet's headline number with its cents stepped back so the eye lands on the dollars, the move carried in a tinted pill beneath, and a privacy toggle that ma… | `npx shadcn@latest add https://ui.ssych.com/r/balance-header.json` |
| market-snapshot | registry:ui | Price snapshot card — animated headline price, period-sliced line chart with crosshair scrubbing, and a gliding period switcher. | `npx shadcn@latest add https://ui.ssych.com/r/market-snapshot.json` |
| index-card | registry:ui | Markets sidebar card — one big price over a full-bleed scrubbable line, a tab underline that walks between indices, and the one-paragraph read below. | `npx shadcn@latest add https://ui.ssych.com/r/index-card.json` |
| range-navigator | registry:ui | Focus + context price history — a detail chart over a mini-map you drag to pan and pull to zoom, with a hover crosshair reading price and date. | `npx shadcn@latest add https://ui.ssych.com/r/range-navigator.json` |
| sectors-donut | registry:ui | Allocation ring with legend cross-highlight — hovering isolates one weight at a time. | `npx shadcn@latest add https://ui.ssych.com/r/sectors-donut.json` |
| ratings-radar | registry:ui | Analyst-ratings pentagon with hairline rings and one green wedge toward the dominant rating. | `npx shadcn@latest add https://ui.ssych.com/r/ratings-radar.json` |
| analyst-radar | registry:ui | Two-series factor radar — subject filled against a dashed peer outline, a hovered spoke reading both values, and a legend that mutes a series. | `npx shadcn@latest add https://ui.ssych.com/r/analyst-radar.json` |
| kpi-card-row | registry:ui | Dashboard stat band — count-up headlines with signed deltas over full-bleed area charts you can hover to read any sample with its date. | `npx shadcn@latest add https://ui.ssych.com/r/kpi-card-row.json` |
| heat-calendar | registry:ui | Weeks of activity as a sequential single-hue grid with month labels, a gliding date-and-count tooltip, a ripple on hover, click-to-span totals and a legend tha… | `npx shadcn@latest add https://ui.ssych.com/r/heat-calendar.json` |
| returns-calendar | registry:ui | Monthly-returns heat grid: years by months diverging up/down by magnitude, a compounded year column, a gliding tooltip that dims everything unrelated, a year r… | `npx shadcn@latest add https://ui.ssych.com/r/returns-calendar.json` |
| holdings-table | registry:ui | Fund-holdings register with YTD pills and tick-comb weight bars. | `npx shadcn@latest add https://ui.ssych.com/r/holdings-table.json` |
| trade-journal-table | registry:ui | A trade log where the open position is lit from its spine and every closed one settles into a win or loss pill; heads sort, the range thumb slides, net P&L car… | `npx shadcn@latest add https://ui.ssych.com/r/trade-journal-table.json` |
| fills-blotter | registry:ui | A streaming order-fills table: new fills slide in at the top as working, then resolve in place to filled or rejected; hover a row for venue, order id and fee; … | `npx shadcn@latest add https://ui.ssych.com/r/fills-blotter.json` |
| candlestick | registry:ui | Candles over a volume histogram with a magnet crosshair, a price badge on the right axis, a live OHLC legend and a switch to a plain close line. | `npx shadcn@latest add https://ui.ssych.com/r/candlestick.json` |
| equity-drawdown | registry:ui | A cumulative equity curve over a synced underwater drawdown panel; one crosshair reads equity, drawdown and days below the high-water mark. | `npx shadcn@latest add https://ui.ssych.com/r/equity-drawdown.json` |
| balance-chart | registry:ui | Wallet-value area chart: trend picks the colour, the high and low float at their true points, scrubbing greys everything ahead of the cursor, and timeframe pil… | `npx shadcn@latest add https://ui.ssych.com/r/balance-chart.json` |
| price-scrubber | registry:ui | Scrub chart with a magnet crosshair, price and time badges on the axes, a hero number that recolours off the reference price, a wash under the pointer and time… | `npx shadcn@latest add https://ui.ssych.com/r/price-scrubber.json` |
| comb-rows | registry:ui | A comparison as rulers of ticks: the cursor tick stands taller at the value and the subject row carries the accent; hover hands it to another row. | `npx shadcn@latest add https://ui.ssych.com/r/comb-rows.json` |
| ticker-tape | registry:ui | A finance tape gliding through a hairline rail on a seamless loop; hovering holds it still, moves read green up and red down. | `npx shadcn@latest add https://ui.ssych.com/r/ticker-tape.json` |
| trade-tape | registry:ui | Live time and sales: prints stream in side-coloured and sized by a magnitude bar, block trades tint the row, and hovering pauses the tape. | `npx shadcn@latest add https://ui.ssych.com/r/trade-tape.json` |
| simple-chart | registry:ui | The compact asset-price card: one line, one number that scrubs under the pointer, and a signed-percent tag the line is de-trended to agree with. | `npx shadcn@latest add https://ui.ssych.com/r/simple-chart.json` |
| matrix-ticker-board | registry:ui | A retro dot-matrix price wall on canvas: 5×7 dot glyphs, and on each quote update only the changed characters dissolve out dot by dot and bloom back. | `npx shadcn@latest add https://ui.ssych.com/r/matrix-ticker-board.json` |
| request-log | registry:ui | API log rows with status pills that unfold their response body inline. | `npx shadcn@latest add https://ui.ssych.com/r/request-log.json` |
| new-items-pill | registry:ui | A live tape that pins the row you are reading — arrivals stop pushing the list down and count into a pill until you tap back to the top. | `npx shadcn@latest add https://ui.ssych.com/r/new-items-pill.json` |
| inbox | registry:ui | Notification inbox — unread dots dissolve on read, mark-all clears the column. | `npx shadcn@latest add https://ui.ssych.com/r/inbox.json` |
| project-index | registry:ui | Bare project rows where the cover only exists while you hover, floating beside the cursor. | `npx shadcn@latest add https://ui.ssych.com/r/project-index.json` |
| news-card | registry:ui | Auto-cycling news module with an ink headline and dot pagination. | `npx shadcn@latest add https://ui.ssych.com/r/news-card.json` |
| alert-stack | registry:ui | Collapsed notification deck that fans open on hover; each dismiss re-settles the pile. | `npx shadcn@latest add https://ui.ssych.com/r/alert-stack.json` |
| assets-balance-card | registry:ui | Deep-ground balance hero: rolling odometer digits, an ambient signal line, scrub readout, and a drag handle that pulls the chart taller. | `npx shadcn@latest add https://ui.ssych.com/r/assets-balance-card.json` |
| onboarding-checklist | registry:ui | Setup checklist — the check draws in and the progress bar keeps a derivable score. | `npx shadcn@latest add https://ui.ssych.com/r/onboarding-checklist.json` |
| preferences-card | registry:ui | Settings rows with icon tiles, one-line hints, and a chevron that walks in on hover. | `npx shadcn@latest add https://ui.ssych.com/r/preferences-card.json` |
| empty-state | registry:ui | A dotted field, a hairline icon chip, one line of ink and one quiet action. | `npx shadcn@latest add https://ui.ssych.com/r/empty-state.json` |
| swap-ticket | registry:ui | Composed trade card. A flip button on the seam really swaps the cards, a token-select overlay covers the ticket, and the CTA label is the validation state. | `npx shadcn@latest add https://ui.ssych.com/r/swap-ticket.json` |
| segmented-control | registry:ui | Hairline pill whose thumb glides between options with a shared-layout spring. | `npx shadcn@latest add https://ui.ssych.com/r/segmented-control.json` |
| avatar-stack | registry:ui | Overlapping gradient-orb coins with a surface ring. Hovering lifts and names a coin, and the overflow count floats the hidden names without widening the stack. | `npx shadcn@latest add https://ui.ssych.com/r/avatar-stack.json` |
| amount | registry:ui | Money-formatting family — Fiat, Crypto and Percent agree on symbol placement, precision, abbreviation and sign colouring. | `npx shadcn@latest add https://ui.ssych.com/r/amount.json` |
| crypto-fiat | registry:ui | Dual-denomination amount field. Type in fiat or units, the toggle carries the value through the rate, and the headline steps down a size tier as it grows. | `npx shadcn@latest add https://ui.ssych.com/r/crypto-fiat.json` |
| screen-shuffle | registry:ui | Stacked screens where the front card arcs to the back on a timer or click. | `npx shadcn@latest add https://ui.ssych.com/r/screen-shuffle.json` |
| mouse-trail-cta | registry:ui | CTA stage where the cursor's particle trail gravitates into the pill and feeds its glow. | `npx shadcn@latest add https://ui.ssych.com/r/mouse-trail-cta.json` |
| ascii-turntable | registry:ui | An extruded solid that turns with the cursor and is redrawn as characters on a grid. The lighting is graded for the ramp, so the face lands mid-scale instead o… | `npx shadcn@latest add https://ui.ssych.com/r/ascii-turntable.json` |
| portfolio-book | registry:block | The balance-first book on one ruled grid: holdings, history and share-of-total composed from six library components, with the page composing and never editing … | `npx shadcn@latest add https://ui.ssych.com/r/portfolio-book.json` |
| portfolio-allocation | registry:block | Composition first. Leads with what the book is made of and how concentrated it is, which is the analyst's first question rather than the owner's. | `npx shadcn@latest add https://ui.ssych.com/r/portfolio-allocation.json` |
| portfolio-tiers | registry:block | The book as four accounts rather than one balance. One pill per tier under the bar, and the pill row is a selector rather than decoration, carrying share-of-to… | `npx shadcn@latest add https://ui.ssych.com/r/portfolio-tiers.json` |
| discover-board | registry:block | The browsing problem, not the reporting one: filters and a trending rail for finding something you do not already hold. | `npx shadcn@latest add https://ui.ssych.com/r/discover-board.json` |
| discover-screener | registry:block | The screener take on discovery: a dense sortable board where the row is the unit and the filters carry the state. | `npx shadcn@latest add https://ui.ssych.com/r/discover-screener.json` |
| terminal-cex | registry:block | An exchange terminal on one ruled workspace: candle chart under an interval bar, book or tape as tabs, ticket and account on the right, and a full-width positi… | `npx shadcn@latest add https://ui.ssych.com/r/terminal-cex.json` |
| gpu-pods | registry:block | A GPU rental marketplace's browse screen: 150 pods in a 15-column table you can sort, search and cross-read, with a filter rail whose counts are honest and a p… | `npx shadcn@latest add https://ui.ssych.com/r/gpu-pods.json` |
| ascii-scroll-morph | registry:block | An immersive landing page with live 3D ASCII shapes that respond to the cursor and transition as you scroll. Adapt the vector artwork, copy and colours in code… | `npx shadcn@latest add https://ui.ssych.com/r/ascii-scroll-morph.json` |
| tradeboard-landing | registry:block | A product landing built on one rule: one ground, one subject, one accent. Giant display headline, the product UI as the hero image, then metric cards, a bento … | `npx shadcn@latest add https://ui.ssych.com/r/tradeboard-landing.json` |
| stablecoin-landing | registry:block | A token landing on the same structure: hero with a brand marquee, a three-card product explainer, a backers marquee and a use-modes grid. Everything structural… | `npx shadcn@latest add https://ui.ssych.com/r/stablecoin-landing.json` |
| simple-landing | registry:block | The library's own marketing page: a near-black ground, one object per section, two-tone display type carrying the hierarchy, and every count read live from the… | `npx shadcn@latest add https://ui.ssych.com/r/simple-landing.json` |

## For AI agents

```text
You are adding components from @ssych to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/ssych.md) for the component list.
2. Fetch the machine-readable index: https://ui.ssych.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: ssych).
```