Overlayscookielegaloverlay
Cookie Consent
Frosted glass cookie notice with accept and preferences actions.
Live Preview
We use cookies to improve your experience. Learn more
Usage
Copy and paste this code into your React component:
tsx
import { CookieBannerGlass } from 'react-component-kit-ui/overlays';
<CookieBannerGlass>Content</CookieBannerGlass>Manual Installation
If you are not using the npm package, create a new file and paste the following code: src/components/CookieBannerGlass.tsx + CookieBannerGlass.css:
CookieBannerGlass.tsx
'use client';
import './CookieBannerGlass.css';
/** CookieBannerGlass โ ported from astro-component-kit. */
export interface CookieBannerGlassProps {
}
export function CookieBannerGlass({}: CookieBannerGlassProps) {
return (
<>
<div className="cookie-bar" data-rk-bdb372="">
<div className="text" data-rk-bdb372="">We use cookies to improve your experience. <a href="#" data-rk-bdb372="">Learn more</a></div>
<div className="acts" data-rk-bdb372=""><button className="opt" data-rk-bdb372="">Options</button><button className="acc" data-rk-bdb372="">Accept All</button></div>
</div>
</>
);
}
export default CookieBannerGlass;CookieBannerGlass.css
/* CookieBannerGlass โ ported from astro-component-kit (overlays/CookieBannerGlass.astro) */
.cookie-bar:where([data-rk-bdb372]) { position: fixed; bottom: 2rem; left: 2rem; right: 2rem; max-width: 600px; margin: 0 auto; background: rgba(15,23,42,0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 1.25rem; display: flex; justify-content: space-between; align-items: center; z-index: 1000; }
.text:where([data-rk-bdb372]) { color: #e2e8f0; font-size: 0.85rem; }
.acts:where([data-rk-bdb372]) { display: flex; gap: 0.75rem; }
button:where([data-rk-bdb372]) { padding: 0.5rem 1rem; border-radius: 8px; border: none; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.opt:where([data-rk-bdb372]) { background: transparent; color: #fff; border: 1px solid #334155; }
.acc:where([data-rk-bdb372]) { background: #6366f1; color: #fff; }Quick Info
- Category
- Overlays
- Filename
CookieBannerGlass.tsx- Dependencies
- None โ pure React + CSS
- Tags
- cookielegaloverlay