Installation
Install components with a GitHub address or a registry namespace.
Before you start
Run the commands from a project configured with shadcn/ui and Tailwind 4. If you don't have a project yet, run npx shadcn@latest init and follow the prompts to create one.
tradecn v2 requires React 19. Upgrade React and React DOM together; TypeScript projects also need the matching React 19 types.
GitHub form
pnpm dlx shadcn@latest add tradecn/ui/data-grid#v2.0.0
npx shadcn@latest add tradecn/ui/data-grid#v2.0.0
yarn dlx shadcn@latest add tradecn/ui/data-grid#v2.0.0
bunx --bun shadcn@latest add tradecn/ui/data-grid#v2.0.0
The tag pins the source version. There is no npm package.
Namespace form
Add @tradecn to the registries object in your existing components.json:
{
"registries": {
"@tradecn": "https://tradecn.dev/r/v2.0.0/{name}.json"
}
}
pnpm dlx shadcn@latest add @tradecn/data-grid
npx shadcn@latest add @tradecn/data-grid
yarn dlx shadcn@latest add @tradecn/data-grid
bunx --bun shadcn@latest add @tradecn/data-grid
This installs the same files as the GitHub form at v2.0.0. To follow the latest release instead, use https://tradecn.dev/r/{name}.json as the namespace URL.
Updating
Review changes with --diff before applying them. Put the tag you're moving to in the first command; the second reviews the shadcn context menu used by the grid.
pnpm dlx shadcn@latest add tradecn/ui/data-grid#v2.0.0 --diff # a tradecn change
pnpm dlx shadcn@latest add context-menu --diff # a shadcn change underneath
npx shadcn@latest add tradecn/ui/data-grid#v2.0.0 --diff # a tradecn change
npx shadcn@latest add context-menu --diff # a shadcn change underneath
yarn dlx shadcn@latest add tradecn/ui/data-grid#v2.0.0 --diff # a tradecn change
yarn dlx shadcn@latest add context-menu --diff # a shadcn change underneath
bunx --bun shadcn@latest add tradecn/ui/data-grid#v2.0.0 --diff # a tradecn change
bunx --bun shadcn@latest add context-menu --diff # a shadcn change underneath
Review stylesheet changes separately by running the command again with the tailwind.css path from your components.json, such as --diff src/index.css. This shows only the stylesheet diff, so keep the file review above.
After reviewing both, rerun the command without --diff or its path and choose which existing files to overwrite. Keep any application changes you need. If you use the namespace form, update its tag in components.json before adding the item again.
Every item at once
After configuring the namespace above, you can install every component, hook and utility at v2.0.0:
pnpm dlx shadcn@latest add @tradecn/format @tradecn/row-store @tradecn/flash-cell @tradecn/data-grid @tradecn/feed-health @tradecn/use-hotkeys @tradecn/command-palette @tradecn/panel @tradecn/sparkline @tradecn/watchlist @tradecn/blotter @tradecn/workspace @tradecn/ticket @tradecn/countdown @tradecn/quote-field @tradecn/rfq-ticket @tradecn/rfq-stack @tradecn/perf-monitor @tradecn/hotkey-editor @tradecn/column-chooser @tradecn/rules-editor @tradecn/alerts @tradecn/status-bar @tradecn/parameter-grid @tradecn/positions @tradecn/audit-trail @tradecn/layout-manager @tradecn/instrument-search @tradecn/depth-ladder @tradecn/spread-matrix @tradecn/quote-panel @tradecn/session-guard @tradecn/price-chart @tradecn/grid-rules @tradecn/preferences @tradecn/alert-store @tradecn/session-calendar @tradecn/limits @tradecn/window-set @tradecn/agent-kit
npx shadcn@latest add @tradecn/format @tradecn/row-store @tradecn/flash-cell @tradecn/data-grid @tradecn/feed-health @tradecn/use-hotkeys @tradecn/command-palette @tradecn/panel @tradecn/sparkline @tradecn/watchlist @tradecn/blotter @tradecn/workspace @tradecn/ticket @tradecn/countdown @tradecn/quote-field @tradecn/rfq-ticket @tradecn/rfq-stack @tradecn/perf-monitor @tradecn/hotkey-editor @tradecn/column-chooser @tradecn/rules-editor @tradecn/alerts @tradecn/status-bar @tradecn/parameter-grid @tradecn/positions @tradecn/audit-trail @tradecn/layout-manager @tradecn/instrument-search @tradecn/depth-ladder @tradecn/spread-matrix @tradecn/quote-panel @tradecn/session-guard @tradecn/price-chart @tradecn/grid-rules @tradecn/preferences @tradecn/alert-store @tradecn/session-calendar @tradecn/limits @tradecn/window-set @tradecn/agent-kit
yarn dlx shadcn@latest add @tradecn/format @tradecn/row-store @tradecn/flash-cell @tradecn/data-grid @tradecn/feed-health @tradecn/use-hotkeys @tradecn/command-palette @tradecn/panel @tradecn/sparkline @tradecn/watchlist @tradecn/blotter @tradecn/workspace @tradecn/ticket @tradecn/countdown @tradecn/quote-field @tradecn/rfq-ticket @tradecn/rfq-stack @tradecn/perf-monitor @tradecn/hotkey-editor @tradecn/column-chooser @tradecn/rules-editor @tradecn/alerts @tradecn/status-bar @tradecn/parameter-grid @tradecn/positions @tradecn/audit-trail @tradecn/layout-manager @tradecn/instrument-search @tradecn/depth-ladder @tradecn/spread-matrix @tradecn/quote-panel @tradecn/session-guard @tradecn/price-chart @tradecn/grid-rules @tradecn/preferences @tradecn/alert-store @tradecn/session-calendar @tradecn/limits @tradecn/window-set @tradecn/agent-kit
bunx --bun shadcn@latest add @tradecn/format @tradecn/row-store @tradecn/flash-cell @tradecn/data-grid @tradecn/feed-health @tradecn/use-hotkeys @tradecn/command-palette @tradecn/panel @tradecn/sparkline @tradecn/watchlist @tradecn/blotter @tradecn/workspace @tradecn/ticket @tradecn/countdown @tradecn/quote-field @tradecn/rfq-ticket @tradecn/rfq-stack @tradecn/perf-monitor @tradecn/hotkey-editor @tradecn/column-chooser @tradecn/rules-editor @tradecn/alerts @tradecn/status-bar @tradecn/parameter-grid @tradecn/positions @tradecn/audit-trail @tradecn/layout-manager @tradecn/instrument-search @tradecn/depth-ladder @tradecn/spread-matrix @tradecn/quote-panel @tradecn/session-guard @tradecn/price-chart @tradecn/grid-rules @tradecn/preferences @tradecn/alert-store @tradecn/session-calendar @tradecn/limits @tradecn/window-set @tradecn/agent-kit
Themes are installed separately because each replaces your palette and typography tokens. If the selected release includes themes, choose one and review its stylesheet changes as described in Theming.