tsx-shadcn-ui-ui-order-of-class-names

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.

Before…lines 1–9 unchanged (9 lines)
10}: SeparatorPrimitive.Props) {
11  return (
12    <SeparatorPrimitive
13      data-slot="separator"
14      orientation={orientation}
15      className={cn(
16        "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
17        className
18      )}
19      {...props}
20    />
21  )
22}
23
24export { Separator }
25

After…lines 1–9 unchanged (9 lines)
10}: SeparatorPrimitive.Props) {
11  return (
12    <SeparatorPrimitive
13      data-slot="separator"
14      orientation={orientation}
15      className={cn(
16        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
17        className
18      )}
19      {...props}
20    />
21  )
22}
23
24export { Separator }
25

Before…lines 1–9 unchanged (9 lines)
10}: SeparatorPrimitive.Props) {
11  return (
12    <SeparatorPrimitive
13      data-slot="separator"
14      orientation={orientation}
15      className={cn(
16        "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
17        className
18      )}
19      {...props}
20    />
21  )
22}
23
24export { Separator }
25

After…lines 1–9 unchanged (9 lines)
10}: SeparatorPrimitive.Props) {
11  return (
12    <SeparatorPrimitive
13      data-slot="separator"
14      orientation={orientation}
15      className={cn(
16        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
17        className
18      )}
19      {...props}
20    />
21  )
22}
23
24export { Separator }
25

Before…lines 1–9 unchanged (9 lines)
10}: SeparatorPrimitive.Props) {
11  return (
12    <SeparatorPrimitive
13      data-slot="separator"
14      orientation={orientation}
15      className={cn(
16        "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
17        className
18      )}
19      {...props}
20    />
21  )
22}
23
24export { Separator }
25

After…lines 1–9 unchanged (9 lines)
10}: SeparatorPrimitive.Props) {
11  return (
12    <SeparatorPrimitive
13      data-slot="separator"
14      orientation={orientation}
15      className={cn(
16        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
17        className
18      )}
19      {...props}
20    />
21  )
22}
23
24export { Separator }
25

Before

program

expression_statement

string

" "\""

string_fragment "use client"

" "\""

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "cn"

} "}"

from "from"

string

" "\""

string_fragment "@/examples/base/lib/utils"

" "\""

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "Separator"

as "as"

identifier "SeparatorPrimitive"

} "}"

from "from"

string

" "\""

string_fragment "@base-ui/react/separator"

" "\""

function_declaration

function "function"

identifier "Separator"

formal_parameters (+26 nodes collapsed)

statement_block

{ "{"

return_statement

return "return"

parenthesized_expression

( "("

jsx_self_closing_element

< "<"

identifier "SeparatorPrimitive"

jsx_attribute

property_identifier "data-slot"

= "="

string

" "\""

string_fragment "separator"

" "\""

jsx_attribute

property_identifier "orientation"

= "="

jsx_expression

{ "{"

identifier "orientation"

} "}"

jsx_attribute

property_identifier "className"

= "="

jsx_expression

{ "{"

call_expression

identifier "cn"

arguments

( "("

string

" "\""

string_fragment "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-fu"...

" "\""

, ","

identifier "className"

) ")"

} "}"

jsx_expression

{ "{"

spread_element

... "..."

identifier "props"

} "}"

/> "/>"

) ")"

} "}"

export_statement

export "export"

export_clause

{ "{"

export_specifier

identifier "Separator"

} "}"

After

program

expression_statement

string

" "\""

string_fragment "use client"

" "\""

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "cn"

} "}"

from "from"

string

" "\""

string_fragment "@/examples/base/lib/utils"

" "\""

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "Separator"

as "as"

identifier "SeparatorPrimitive"

} "}"

from "from"

string

" "\""

string_fragment "@base-ui/react/separator"

" "\""

function_declaration

function "function"

identifier "Separator"

formal_parameters (+26 nodes collapsed)

statement_block

{ "{"

return_statement

return "return"

parenthesized_expression

( "("

jsx_self_closing_element

< "<"

identifier "SeparatorPrimitive"

jsx_attribute

property_identifier "data-slot"

= "="

string

" "\""

string_fragment "separator"

" "\""

jsx_attribute

property_identifier "orientation"

= "="

jsx_expression

{ "{"

identifier "orientation"

} "}"

jsx_attribute

property_identifier "className"

= "="

jsx_expression

{ "{"

call_expression

identifier "cn"

arguments

( "("

string

" "\""

string_fragment "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-fu"...

" "\""

, ","

identifier "className"

) ")"

} "}"

jsx_expression

{ "{"

spread_element

... "..."

identifier "props"

} "}"

/> "/>"

) ")"

} "}"

export_statement

export "export"

export_clause

{ "{"

export_specifier

identifier "Separator"

} "}"

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