S
ssych ui
AccordionAn accordion for feature and FAQ sections on product pages, each row opening to a body, a checklist and a screenshot.
Account Dropdownaccount-dropdownA crypto wallet account switcher that lists each address with its balance and share of the total, for multi wallet web3 apps.
Agent Run Timelineagent-run-timelineAn AI agent run timeline that shows each step with its tool call, duration and status, with the input and output one click away.
Alert Stackalert-stackA stacked notification panel for price alerts, margin warnings and order fills that fans open on hover and settles as you dismiss.
Allocation Treemapallocation-treemapA portfolio allocation treemap with holdings sized by weight, reading the share and value of each position on hover.
Currency AmountamountCurrency and crypto amount formatters that keep symbols, decimals, abbreviations and signed colours consistent across a fintech screen.
Amount Slideramount-sliderAn amount slider for choosing a share of a balance with 25, 50, 75 and 100 percent presets, for trade, withdraw and stake forms.
Analyst Radaranalyst-radarA factor score radar chart for equity research, comparing a company with its sector on value, growth, profit, momentum and quality.
Approval Quorumapproval-quorumA multisig approval widget for treasury and payment releases, where risk, treasury and compliance sign off until the quorum is met.
ASCII Badgeascii-badgeAny SVG mark as a domed badge drawn in characters: the lit surface is read per cell and each cell's brightness picks a character from the ramp, so the letters change with the light as it turns. Drawn in WebGPU, it leans toward the cursor and flips on click.
ASCII Turntableascii-turntableA 3D logo or token mark drawn in ASCII characters that turns with the cursor, for crypto, AI and developer tool landing pages.
Assets Balance Cardassets-balance-cardA portfolio balance card with rolling odometer digits and an intraday chart you can drag taller, for crypto wallets and banking apps.
Automation Builderautomation-builderA trading automation builder that writes a strategy as sentences, from news sentiment to orders, with editable values and a test run.
Avatar Stackavatar-stackAn overlapping avatar stack for teams, signers or token holders that lifts and names one on hover and lists the overflow.
Balance Chartbalance-chartA wallet balance chart for crypto and banking apps: an area line coloured by trend, with high and low marks and timeframes from 1H to All.
Balance Headerbalance-headerA wallet and bank balance header with the total, the 24h move and a privacy toggle that masks every figure, for crypto and fintech apps.
Bento Gallerybento-galleryA draggable bento grid gallery for product shots and dashboard screenshots that opens into a shared lightbox.
Browser Windowbrowser-windowA browser window mockup for showing a dashboard or web app on a landing page, in Chrome or Safari frames, with a phone layout under 480px.
Candlestick ChartcandlestickA candlestick chart with a volume histogram, a magnet crosshair and a live OHLC legend, for stock and crypto trading terminals.
Card Gridcard-gridA responsive card grid for products, strategies or case studies, with hover actions on each card and a shared detail modal.
Card Listcard-listA vertical card list for reports, products or case studies, each card with media and copy, opening into a shared detail modal.
Card Stackcard-stackA swipeable card stack carousel for product showcases and feature tours; drag the top card away or click it to open a detail modal.
Comb Rowscomb-rowsA peer comparison chart that draws each company as a ruler of ticks, for valuation metrics like P/E across a sector.
Cross Chain Swapcross-chain-swapA cross chain bridge and swap widget for moving tokens between networks like Ethereum, Solana and Arbitrum, reversible in one click.
Crypto/Fiatcrypto-fiatA crypto amount input that switches between fiat and token units at the current rate, for wallets, exchanges and payment flows.
Cutout Cardcutout-cardMedia card with a scooped-out content tray (concave corners), hover-reveal action button, and gradient overlay.
Date Range Pickerdate-range-pickerA date range picker with two month calendars and presets like last 7, 30 and 90 days, for analytics, reporting and trade history filters.
Depth Chartdepth-chartA market depth chart for crypto exchanges showing bid and ask liquidity around the mid price, with a readout of size on each side.
Dialog Stackdialog-stackStacked dialogs for multi step confirmations like plan changes, approvals and sign off, where each step layers on top and Escape steps back.
Donut Chartdonut-chartA crypto portfolio donut chart that shows allocation as a ring with the total in the centre, the ring and its legend highlighting together.
Dotted Area Chartdotted-area-chartA crypto price area chart on a dotted field; scrub it to light the stretch you have passed and read the price and move at any point.
Empty Stateempty-stateAn empty state for trading and fintech dashboards: a quiet dotted field with one line of copy and one call to action.
Equity & Drawdownequity-drawdownAn equity curve with a synced drawdown chart for backtests and trading performance, one crosshair reading return, drawdown and days below peak.
Market Event Feedevent-feedA market events feed grouped by day, each headline with its ticker, price and move, for stock research and trading dashboards.
Execution Controlsexecution-controlsA hold to confirm order button for trading apps that shows the order as working, filled or rejected, with a timed undo.
File Treefile-treeA file tree for code bundles, data exports and research folders, with folding folders, keyboard navigation and sizes on the right.
Fills Blotterfills-blotterA live order fills blotter for brokers and trading desks, streaming executions that land as working and resolve to filled or rejected.
Net Flow Barsflow-barsA net flow bar chart for daily ETF, exchange or wallet inflows and outflows, where dragging across days sums the run.
Gantt Chartgantt-miniA compact Gantt chart for sprint and release planning, with a today line and the dates, length and owner of each task on hover.
Glass Badgeglass-badgeAny SVG mark as a frosted glass badge: translucent, with the light catching its rolled edge and the page showing through. Drawn in WebGPU, it leans toward the cursor and flips on click.
Gold Badgegold-badgeThe metal badge in gold: any SVG mark as a domed, brushed gold badge drawn in WebGPU. It leans toward the cursor with the light following, and a click flips it.
Graph Comparisongraph-comparisonA stock comparison chart that indexes up to four tickers to the same start, for relative performance from 1M to 1Y.
Health Gaugehealth-gaugeA gauge chart for margin ratio, fear and greed or liquidity scores, on a 270 degree dial that counts up and cycles metrics on click.
Heat Calendarheat-calendarA calendar heatmap of daily activity such as transactions, trades or API calls, with a readout on hover and a selected span that totals the days.
Historical EPShistorical-epsA quarterly EPS chart for stock research and earnings screens, with forecast against reported bars and the surprise on hover.
Holdings Tableholdings-tableA fund holdings table with market value, price, YTD return and portfolio weight bars, sortable by any column, for ETF and wealth apps.
Holographic Badgeholo-badgeAny SVG mark as a holographic badge: a silver dome under a thin film whose colour shifts with the angle, with a fine sparkle. Drawn in WebGPU, it leans toward the cursor and flips on click.
Notification InboxinboxA notification inbox for SaaS and trading apps, with unread markers that clear as you read and a mark all as read action.
Index Cardindex-cardA market index card for the S&P 500, Dow, Nasdaq and Russell, with tabs between indices and an intraday line you can scrub.
Info Cardinfo-cardA small callout card with a title, one line and an action row, for help prompts and upsells in a dashboard sidebar.
Inline Sliderinline-sliderA range filter slider with its label and value inside the track, for screeners and GPU marketplaces filtering memory, cores and price.
Kanban Boardkanban-boardA kanban board for engineering, ops and compliance work with three columns and counts, moving a card forward in one click.
KPI Card Rowkpi-card-rowA KPI card row for SaaS, AI and API dashboards, with metrics like requests and uptime counting up over area charts you can scrub.
Leverage Ticketleverage-ticketA perpetual futures order ticket with margin, long or short and a leverage slider that updates position size, fees and the liquidation price.
Lightning Badgelightning-badgeAny SVG mark as a dark glass badge with lightning crawling over its face. Drawn in WebGPU, it leans toward the cursor and flips on click.
MacBook Framemacbook-frameA MacBook mockup frame for product screenshots and live app embeds on landing pages, pitch decks and fintech case studies.
macOS Dockmacos-dockA macOS style app dock with magnifying icons and a ⌘K command menu, for launchers and workspace switchers in trading and AI tools.
Market Heatmapmarket-heatmapA stock market heatmap with tiles sized by market cap and tinted by the daily move, for market overview and trading dashboards.
Market Shelfmarket-shelfA row of crypto market tiles with price, daily change and a 7 day sparkline, for exchange and portfolio home screens.
Market Snapshotmarket-snapshotA stock price card with periods from 1D to All and a line chart you scrub for the price at any moment, for broker and market apps.
Market Watchlistmarket-watchlistA watchlist that reads as one chart: every watched coin as a line from the same open, a row per coin, and the whole market beside it in tokens, sectors and yields, where any row adds itself to the list.
Matrix Ticker Boardmatrix-ticker-boardA dot matrix stock price board drawn on canvas, where changed digits dissolve and redraw on each quote, for trading floors and landing pages.
Metal Badgemetal-badgeAny SVG mark as a domed chrome badge, drawn in WebGPU. It leans toward the cursor with the light following, and a click flips it. Falls back to a flat chrome face where WebGPU is missing.
ModalAn accessible modal dialog for confirmations like cancelling orders or revoking API keys, with a focus trap and Escape to close.
Model Comparisonmodel-comparisonAn LLM comparison table of quality, latency, cost per million tokens and context window, showing each gap to the best model.
Morph Disclosuremorph-disclosureAn expandable row that opens in place into a short sheet of summary and key facts, for product, strategy or company listings.
Mouse-Trail CTAmouse-trail-ctaA call to action button whose glow is fed by a cursor particle trail, for the landing page hero of an AI or fintech product.
Neon Badgeneon-badgeAny SVG mark as a dark badge with a neon outline that glows and breathes. Drawn in WebGPU, it leans toward the cursor and flips on click.
New Items Pillnew-items-pillA live trade feed that holds your place while new rows arrive and counts them into a pill, for tapes, alerts and activity feeds.
News Cardnews-cardA market news card that cycles headlines with their source and time, for trading dashboards, broker apps and crypto portals.
Onboarding Checklistonboarding-checklistAn onboarding checklist for developer and fintech products, with steps that check off and a progress bar counting what is done.
Order Bookorder-bookA crypto exchange order book with bids, asks and depth bars, reading the cumulative size and value up to any price level.
Order Ticketorder-ticketA buy and sell order form for limit and market orders where price, amount and total stay in sync, for crypto exchanges and broker apps.
Payment Cardpayment-cardA saved payment card for billing and banking settings that lifts out of its pocket to show the card face, with an update card form.
Performance Chartperformance-chartA portfolio performance chart against a benchmark index, shaded green while ahead and red while behind, with the gap on any day.
Positions Tablepositions-tableAn open positions table for futures and margin trading with entry, mark, liquidation price and unrealised P&L, plus hold to close.
Preferences Cardpreferences-cardAn account settings card with rows for profile, payment method and notifications, for SaaS, banking and exchange account pages.
Price Scrubberprice-scrubberA stock price chart you scrub with a magnet crosshair and price and time badges on the axes, the headline price turning green or red against the open.
Price Target Fanprice-target-fanAn analyst price target chart for stock research: a year of price history, then projections fanning out to the high, mean and low targets.
Project Cardproject-cardShared cutout project card with blurred-gradient media and a liquid-metal hover ring.
Project Indexproject-indexA list of companies or projects where each row shows its cover beside the cursor on hover, for fund portfolios and case study pages.
Quick Ticketquick-ticketA watchlist row that expands into a quick order ticket for market and limit orders, for broker and stock trading apps.
Radial Gaugeradial-gaugeA radial gauge for pass rates like model evals, health checks or compliance tests, with fail, watch and pass bands you can read.
Range Navigatorrange-navigatorA price history chart with a range selector minimap; drag the window to pan and pull an edge to zoom, for trading and analytics apps.
Ratings Radarratings-radarAn analyst ratings chart for stock research pages, spreading strong buy to strong sell on a pentagon pulled toward the consensus.
Release Feedrelease-feedA changelog feed for developer tools and APIs that groups release notes by added, changed and fixed, with copyable versions.
API Request Logrequest-logAn API request log for developer dashboards, with method, path, status and latency per call and the response body unfolding inline.
Returns Calendarreturns-calendarA monthly returns heatmap for funds, strategies and backtests, with a compounded yearly column and spans you select to compound returns.
Sankey Diagramsankey-flowA Sankey diagram for cash flow, budgets and fund flows, where income pools in one hub and each ribbon width stands for the amount.
Scatter Plotscatter-plotA risk and return scatter plot of stocks by volatility and yearly return, naming each point with a hairline to both axes.
Screen Shufflescreen-shuffleA stack of product screenshots that rotates the front screen to the back, for SaaS and fintech landing page heroes.
Sectors Donutsectors-donutA sector allocation donut for ETF and fund pages that shows each sector weight and dims the rest while you hover one.
Segmented Controlsegmented-controlA segmented control for timeframes and view modes like 24h, 7d and 30d, with a thumb that slides between the options.
Series Spotlightseries-spotlightA multi line chart of twelve crypto assets with one highlighted at a time, for comparing coins without losing the one you track.
Setup Steppersetup-stepperA setup stepper for onboarding flows like domain verification or API setup, with numbered steps down a rail and a Continue action.
SidebarA collapsible sidebar navigation for SaaS admin panels and trading dashboards, with accordion sections, an active rail and a mobile drawer.
Mini Price Chartsimple-chartA compact crypto price card with one line and one number that follows your pointer, for wallets, exchanges and market widgets.
SMA Chartsma-chartA stock price chart with 20 and 50 day simple moving average overlays and crosshair scrubbing, for trading and technical analysis screens.
Stacked Bar Chartstacked-barsA stacked bar chart of monthly totals by series, shown with AI inference spend by model, reading value and share on hover.
Stat Tilestat-tileCompact stat tiles for trading metrics like net P&L, win rate and Sharpe ratio, each with a sparkline you scrub for any point.
Stone Badgestone-badgeAny SVG mark as a carved stone badge, drawn in WebGPU: facets, fissures and mineral speckle on a roughened dome. It leans toward the cursor with the key light following, and a click flips it. Falls back to a flat stone face where WebGPU is missing.
Swap Confirmswap-confirmA stock swap confirmation that sells one holding for another, showing the rate and the minimum received before you confirm.
Swap Ticketswap-ticketA token swap widget for DEX and crypto wallet apps, with an editable amount, a flip button, a token picker and slippage settings.
Order Flowtape-flowAn order flow chart of the last 48 trades as bars sized by volume and coloured by side, for crypto and futures trading terminals.
Ticker Tapeticker-tapeA scrolling stock and crypto ticker tape with BTC, ETH, TAO and NVDA, green up and red down, paused on hover, for headers and trading dashboards.
Tool Call Cardtool-call-cardAn AI agent tool call card that shows the arguments, result, duration and status of one call, with a run again action.
Top Coinstop-coinsA top cryptocurrencies widget with Bitcoin, Ethereum and Solana prices and sparklines over 3M to 1Y, scrubbable for any week.
Total Balancetotal-balanceA total balance chart for crypto and banking accounts with windows from 24h to All, reading balance, change and drawdown at any point.
Trade Journal Tabletrade-journal-tableA trade journal table for crypto and stock traders, with the open position lit and every closed trade settled to a win or loss.
Trade Tapetrade-tapeA live time and sales tape for trading terminals, streaming prints coloured by side and sized by volume, with block trades highlighted.
Uptime Barsuptime-barsA 90 day uptime status chart for APIs and inference services, reading the uptime and incident of any day on hover.
View Switchview-switchA view switcher for desktop, mobile and code previews where only the selected option shows its label, for docs and component galleries.
Key Stats Stripvitals-stripA key stats strip for a stock page with price, market cap, index weight, volume and P/E, each figure showing its formula on hover.
Volume Profilevolume-profileA volume profile chart of traded volume by price with the point of control and value area, for futures and crypto traders.
Wallet Drawerwallet-drawerA crypto wallet drawer with holdings, DeFi positions and activity, plus send, receive and settings views, for web3 apps.
Watchlist Stackwatchlist-stackA stock watchlist with an intraday sparkline, price and daily move per ticker, scrubbable for the price at any moment.