Skip to content

fix(separator): use border instead of background for web#527

Open
ekkoitac wants to merge 1 commit into
founded-labs:mainfrom
ekkoitac:fix-separator-web
Open

fix(separator): use border instead of background for web#527
ekkoitac wants to merge 1 commit into
founded-labs:mainfrom
ekkoitac:fix-separator-web

Conversation

@ekkoitac

Copy link
Copy Markdown

Description

Separator renders as <hr> on web, which doesn't support background-color. This fix uses border-* utilities instead, which correctly style <hr> elements.

Changes

  • Use Platform.select() to differentiate web from native rendering
  • Web: border-t border-border (horizontal) / border-l border-border (vertical)
  • Native: keep existing bg-border with dimensions

Fixes #525


Tested Platforms

  • Web
  • iOS
  • Android

Affected Apps/Packages

  • apps/docs
  • apps/showcase
  • apps/cli
  • packages/registry

Notes

  • SeparatorPrimitive.Root renders as <hr> on web, where Tailwind's bg-border (background-color) has no effect. The web platform requires border-* utilities to show the line.
  • Native <View> rendering is unaffected and continues to use bg-border.

Separator renders as <hr> on web, which doesn't support background-color.
Use border-* utilities instead, which correctly style <hr> elements.

Fixes founded-labs#525
@vercel

vercel Bot commented Mar 28, 2026

Copy link
Copy Markdown

@ekkoitac is attempting to deploy a commit to the React Native Reusables Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Seperator is not showing

1 participant