shadcn.io is not affiliated with official shadcn/ui
Stock Alerts Chat Block for Radix UI
A price-alert chat whose composer is a row of fields: a ticker menu, Above or Below, a price and Set alert, with crossed rules firing as cards against a typed tape and the rest held in a Watching band.
Installation
Overview
Show a price-alert helper in a conversation, with this stock alerts chat for React with Radix UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Tickwatch, a price-alert tool, with "Not investment advice" in the top bar. The composer is a row of fields instead of free text: a Native Select of five fictional tickers, a Toggle Group for Above or Below, an Input for the price and a "Set alert" Shine Button, the only colored control. The prices are a typed tape, not a market. A rule the tape has already crossed fires at once as an alert card in the thread, with the ticker, the last price, the change with an arrow and a sign, your threshold and the word "Crossed"; one it has not crossed joins the "Watching" band above the fields, which holds two rows and scrolls, where each rule can be removed or snoozed for the session. The log is Message and Bubble rows and the frame is ruled by Guides. For a trading app, a price tracker or any tool that watches a number for you.
FAQ
What stays in the page, and how do I make it real?
Everything. The five companies and their prices are made up and typed in the file; no market is read and nothing is stored or sent. The helper's reply to each alert is chosen by whether the typed tape has already crossed it. To make it real, replace the tape with your own price feed where quoteOf is called and save rules where setAlert creates them.
When does an alert fire?
At once, if the last typed price is already past your threshold: at or above it for Above, at or below it for Below. Then it appears as a card in the thread. Otherwise it waits in the Watching band. The demo has no clock, so a waiting rule never fires by itself.
What do Remove and Snooze do?
Remove deletes the rule from the band. Snooze marks it "Snoozed" for the session and the button turns into Resume; neither changes the cards already in the thread. The band holds two rows and scrolls, so adding a third rule never moves the composer.
What price formats are accepted?
Digits with up to two decimals and a point or a comma, such as 41, 41.5 or 41,05. Anything else is answered in the status line, "Enter a price like 41.00." Prices are integer cents inside, so 41.20 is 4120 and there are no rounding surprises.
Is it usable with a keyboard and a screen reader?
Every field has a visible label, the direction is a labelled group of toggle buttons, and each Watching row has Snooze and Remove buttons named for their rule, such as "Remove STLC below 18.00". A change is a glyph, an arrow and a sign, never a color alone. The status line under the fields is the one live region.