HTML/CSS
Install
Use this as a template path now; later it can map to a real registry package.
pnpm dlx shadcn@latest add @squadkode/ui-lab/glass-navbarUsage (with your settings)
A compact React example generated from this template data.
import "./glass-navbar.css"; export function GlassNavbar() { return ( <header className="sk-navbar"> <a href="/">SquadKode</a> <nav> <a href="/works">Works</a> <a href="/services">Services</a> <a href="/contact">Contact</a> </nav> </header> );}Code
Switch between HTML, CSS, TSX, and Astro versions.
<header class="sk-navbar"> <a href="/">SquadKode</a> <nav> <a href="/works">Works</a> <a href="/services">Services</a> <a href="/contact">Contact</a> </nav></header>.sk-navbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid rgba(213,171,255,.2); border-radius: 999px; padding: .65rem .8rem .65rem 1rem; background: rgba(9,13,20,.76); backdrop-filter: blur(24px);} .sk-navbar a { color: #f8f8ff; text-decoration: none; font-weight: 700;} .sk-navbar nav { display: flex; gap: .9rem;}import "./glass-navbar.css"; export function GlassNavbar() { return ( <header className="sk-navbar"> <a href="/">SquadKode</a> <nav> <a href="/works">Works</a> <a href="/services">Services</a> <a href="/contact">Contact</a> </nav> </header> );}---// Glass Navbar--- <header class="sk-navbar"> <a href="/">SquadKode</a> <nav> <a href="/works">Works</a> <a href="/services">Services</a> <a href="/contact">Contact</a> </nav></header> <style>.sk-navbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid rgba(213,171,255,.2); border-radius: 999px; padding: .65rem .8rem .65rem 1rem; background: rgba(9,13,20,.76); backdrop-filter: blur(24px);} .sk-navbar a { color: #f8f8ff; text-decoration: none; font-weight: 700;} .sk-navbar nav { display: flex; gap: .9rem;}</style>Copy Prompt
Use this prompt to recreate or extend the element with the same intent.
Create a polished Glass Navbar component for a modern Astro or React website. Requirements: - Match the SquadKode visual system with clean spacing, 8px card radius, accessible labels, and responsive behavior. - Provide HTML, CSS, TSX, and Astro versions. - Keep the component lightweight, semantic, and easy to copy into a production page. - Include notes for accessibility, reduced motion, and where this pattern works best. Context: A transparent navbar pattern for dark hero sections and sticky headers.
Variations
1 related patterns from this category.
Implementation Notes
Small details that make this template useful in production pages.
Blurred panel
Clear active action
Responsive-friendly structure