tsx-shadcn-ui-ui-update-release-announcement

A painting is a person's account of this edit as text, recorded independently of the node mapping - a rendering often has several equally defensible answers where the mapping has one. Deletions and insertions carry no position on the opposite side in a painting, so that panel draws no caret for them.

Before1import Link from "next/link"
2import { ArrowRightIcon } from "lucide-react"
3
4import { Badge } from "@/registry/new-york-v4/ui/badge"
5
6export function Announcement() {
7  return (
8    <Badge asChild variant="secondary" className="rounded-full">
9      <Link href="/docs/changelog">
10        Now available: shadcn CLI 3.0 and MCP Server <ArrowRightIcon />
11      </Link>
12    </Badge>
13  )
14}
15

After1import Link from "next/link"
2import { ArrowRightIcon } from "lucide-react"
3
4import { Badge } from "@/registry/new-york-v4/ui/badge"
5
6export function Announcement() {
7  return (
8    <Badge asChild variant="secondary" className="rounded-full">
9      <Link href="/docs/changelog">
10        <span className="flex size-2 rounded-full bg-blue-500" title="New" />
11        New Components: Field, Input Group, Item and more <ArrowRightIcon />
12      </Link>
13    </Badge>
14  )
15}
16

Before1import Link from "next/link"
2import { ArrowRightIcon } from "lucide-react"
3
4import { Badge } from "@/registry/new-york-v4/ui/badge"
5
6export function Announcement() {
7  return (
8    <Badge asChild variant="secondary" className="rounded-full">
9      <Link href="/docs/changelog">
10        Now available: shadcn CLI 3.0 and MCP Server <ArrowRightIcon />
11      </Link>
12    </Badge>
13  )
14}
15

After1import Link from "next/link"
2import { ArrowRightIcon } from "lucide-react"
3
4import { Badge } from "@/registry/new-york-v4/ui/badge"
5
6export function Announcement() {
7  return (
8    <Badge asChild variant="secondary" className="rounded-full">
9      <Link href="/docs/changelog">
10        <span className="flex size-2 rounded-full bg-blue-500" title="New" />
11        New Components: Field, Input Group, Item and more <ArrowRightIcon />
12      </Link>
13    </Badge>
14  )
15}
16

Before

program

import_statement

import "import"

import_clause

identifier "Link"

from "from"

string

" "\""

string_fragment "next/link"

" "\""

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "ArrowRightIcon"

} "}"

from "from"

string

" "\""

string_fragment "lucide-react"

" "\""

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "Badge"

} "}"

from "from"

string

" "\""

string_fragment "@/registry/new-york-v4/ui/badge"

" "\""

export_statement

export "export"

function_declaration

function "function"

identifier "Announcement"

formal_parameters

( "("

) ")"

statement_block

{ "{"

return_statement

return "return"

parenthesized_expression

( "("

jsx_element

jsx_opening_element

< "<"

identifier "Badge"

jsx_attribute

property_identifier "asChild"

jsx_attribute

property_identifier "variant"

= "="

string

" "\""

string_fragment "secondary"

" "\""

jsx_attribute

property_identifier "className"

= "="

string

" "\""

string_fragment "rounded-full"

" "\""

> ">"

jsx_element

jsx_opening_element

< "<"

identifier "Link"

jsx_attribute

property_identifier "href"

= "="

string

" "\""

string_fragment "/docs/changelog"

" "\""

> ">"

jsx_text "\n Now available: shadcn CLI 3.0 and MCP Server "

jsx_self_closing_element

< "<"

identifier "ArrowRightIcon"

/> "/>"

jsx_closing_element

</ "</"

identifier "Link"

> ">"

jsx_closing_element

</ "</"

identifier "Badge"

> ">"

) ")"

} "}"

After

program

import_statement

import "import"

import_clause

identifier "Link"

from "from"

string

" "\""

string_fragment "next/link"

" "\""

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "ArrowRightIcon"

} "}"

from "from"

string

" "\""

string_fragment "lucide-react"

" "\""

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "Badge"

} "}"

from "from"

string

" "\""

string_fragment "@/registry/new-york-v4/ui/badge"

" "\""

export_statement

export "export"

function_declaration

function "function"

identifier "Announcement"

formal_parameters

( "("

) ")"

statement_block

{ "{"

return_statement

return "return"

parenthesized_expression

( "("

jsx_element

jsx_opening_element

< "<"

identifier "Badge"

jsx_attribute

property_identifier "asChild"

jsx_attribute

property_identifier "variant"

= "="

string

" "\""

string_fragment "secondary"

" "\""

jsx_attribute

property_identifier "className"

= "="

string

" "\""

string_fragment "rounded-full"

" "\""

> ">"

jsx_element

jsx_opening_element

< "<"

identifier "Link"

jsx_attribute

property_identifier "href"

= "="

string

" "\""

string_fragment "/docs/changelog"

" "\""

> ">"

jsx_self_closing_element

< "<"

identifier "span"

jsx_attribute

property_identifier "className"

= "="

string

" "\""

string_fragment "flex size-2 rounded-full bg-blue-500"

" "\""

jsx_attribute

property_identifier "title"

= "="

string

" "\""

string_fragment "New"

" "\""

/> "/>"

jsx_text "\n New Components: Field, Input Group, Item and more "

jsx_self_closing_element

< "<"

identifier "ArrowRightIcon"

/> "/>"

jsx_closing_element

</ "</"

identifier "Link"

> ">"

jsx_closing_element

</ "</"

identifier "Badge"

> ">"

) ")"

} "}"

Keybindings

j / k: next / previous visible node (tree panels)
h / l: collapse / expand the focused node
g / G: jump to first / last visible node
Tab: switch focus between Before/After panels
/: search: jump to next node whose text contains a given string
a: jump the other panel to this node's mapped counterpart
i: hide identical matches, showing only inserted/deleted/updated nodes and their ancestors
v: cycle the view: split / code only / tree only
p: cycle what the code view renders: the node mapping, then each human painting
r: mark this fixture as reviewed, or forget the mark (kept in this browser only)
n: open a random fixture not yet marked as reviewed
?: toggle this help