react border implementations #810

New issue

Closed

opened 2026-03-14 08:39:21 +03:00 by kerem · 2 comments

kerem commented

2026-03-14 08:39:21 +03:00

Owner

Originally created by @rgodha24 on GitHub (Sep 28, 2025).
Original GitHub issue: https://github.com/anomalyco/opentui/issues/186

Originally assigned to: @msmps on GitHub.

in react this renders with a border

import { TextAttributes } from "@opentui/core";
import { render } from "@opentui/react";

function App() {
  return (
    <box alignItems="center" justifyContent="center" flexGrow={1}>
      <box justifyContent="center" alignItems="flex-end" borderStyle="single">
        <ascii-font font="tiny" text="OpenTUI" />
        <text attributes={TextAttributes.DIM}>What will you build?</text>
      </box>
    </box>
  );
}

render(<App />);

in solid this doesn't render with a border:

import { TextAttributes } from "@opentui/core";
import { render } from "@opentui/solid";

render(() => (
  <box alignItems="center" justifyContent="center" flexGrow={1}>
    <box justifyContent="center" alignItems="flex-end" borderStyle="single">
      <ascii_font font="tiny" text="OpenTUI" />
      <text attributes={TextAttributes.DIM}>What will you build?</text>
    </box>
  </box>
));

you have to specify the border prop also for some reason

import { TextAttributes } from "@opentui/core";
import { render } from "@opentui/solid";

render(() => (
  <box alignItems="center" justifyContent="center" flexGrow={1}>
-     <box justifyContent="center" alignItems="flex-end" borderStyle="single">
+     <box justifyContent="center" alignItems="flex-end" borderStyle="single" border>
      <ascii_font font="tiny" text="OpenTUI" />
      <text attributes={TextAttributes.DIM}>What will you build?</text>
    </box>
  </box>
));

I think the react version of this makes more sense (and the react version also aligns with the logic in the Box renderable). would you accept a pr making the solid implementation match closer to the react version?

Originally created by @rgodha24 on GitHub (Sep 28, 2025). Original GitHub issue: https://github.com/anomalyco/opentui/issues/186 Originally assigned to: @msmps on GitHub. in react this renders with a border ```tsx src/index.tsx import { TextAttributes } from "@opentui/core"; import { render } from "@opentui/react"; function App() { return ( <box alignItems="center" justifyContent="center" flexGrow={1}> <box justifyContent="center" alignItems="flex-end" borderStyle="single"> <ascii-font font="tiny" text="OpenTUI" /> <text attributes={TextAttributes.DIM}>What will you build?</text> </box> </box> ); } render(<App />); ``` in solid this doesn't render with a border: ```tsx src/index.tsx import { TextAttributes } from "@opentui/core"; import { render } from "@opentui/solid"; render(() => ( <box alignItems="center" justifyContent="center" flexGrow={1}> <box justifyContent="center" alignItems="flex-end" borderStyle="single"> <ascii_font font="tiny" text="OpenTUI" /> <text attributes={TextAttributes.DIM}>What will you build?</text> </box> </box> )); ``` you have to specify the `border` prop also for some reason ```diff src/index.tsx import { TextAttributes } from "@opentui/core"; import { render } from "@opentui/solid"; render(() => ( <box alignItems="center" justifyContent="center" flexGrow={1}> - <box justifyContent="center" alignItems="flex-end" borderStyle="single"> + <box justifyContent="center" alignItems="flex-end" borderStyle="single" border> <ascii_font font="tiny" text="OpenTUI" /> <text attributes={TextAttributes.DIM}>What will you build?</text> </box> </box> )); ``` I think the react version of this makes more sense (and the react version also aligns with the logic in the Box renderable). would you accept a pr making the solid implementation match closer to the react version?