coinbase / coinbase/onchainkit
Feature Request: Need better CSS isolation for `@coinbase/onchainkit/styles.css` (global styles are hard to integrate)
- Dominant language
- TypeScript
- Stars
- 1k
- Forks
- 520
- Avg merge
- 32m
- Merged PRs (30d)
- 2
Description
### Describe the solution you'd like
Hi OnchainKit team 👋
First of all, thanks for the great work on the project!!
I'm currently integrating `@coinbase/onchainkit` **v1.1.2** into an existing web app, and I'm running into a major obstacle related to CSS isolation.
## Problem
`@coinbase/onchainkit/styles.css` contains Tailwind's `@layer base` output, which includes many global selectors such as:
```css
...
@layer base {
*, :after, :before, ::backdrop { ... }
html, :host { ... }
...
}
...
```
Because these selectors (`*`, `html`, `body`, ...) are global, they override or conflict with the styles of any existing application that imports OnchainKit.
This makes it very difficult to embed OnchainKit inside another project without affecting the rest of the UI.
## Describe Alternatives I've Considered:
### 1. Shadow DOM Isolation
Normally this could be solved with Shadow DOM, but OnchainKit's Wallet modal uses `radix-ui/react-dialog`, and Radix currently does not support Shadow DOM portals:
https://github.com/radix-ui/primitives/issues/3484
Because of this Radix limitation, the modal escapes the shadow root and still receives the global styles.
So full isolation is not possible right now.
### 2. PostCSS Prefixing
I can manually rewrite the entire `styles.css` file with a custom prefix (e.g., wrapping all selectors under `.onchainkit-sandbox`).
This reduces style leakage, but it requires maintaining a custom build step and breaks whenever OnchainKit updates its CSS.
### 3. Removing `@layer base` Manually
Another option is to exclude Tailwind's `@layer base` from the bundle and recreate only the necessary styles by hand.
This works, but it requires forking or rebuilding the CSS, which is fragile and difficult to maintain long-term.
## Requested Feature
Would it be possible for OnchainKit to offer **an isolated or namespaced CSS build**, such as:
- A version of the CSS bundle without Tailwind `@layer base`
- Or a scoped version where styles are wrapped under a root selector (ex: `.onchainkit-scope`), so they don't leak globally
- Or any other approach that avoids affecting the host application's global styles
## Why This Is Based..?!
Many teams want to integrate OnchainKit into existing, already-styled apps.
But the current global CSS makes this very difficult without workarounds like prefixing, forking the CSS, or rebuilding the bundle manually.
---
Thanks for considering this!
Happy to provide more details if needed.
H a p p y
C o d i n g
🧙♂️
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.