Component demos

UI Lab

Signal ToggleA circular signal switch with a tactile dark surface and soft active state.

23K views754 saves

toggles

Signal Toggle

A circular signal switch with a tactile dark surface and soft active state.

Preview CodeCSS

Customize

ColorTiming 1.00xMotion 100%

Props

PropertyTypeDefaultDescription

accentcolor#d5abffControls the primary accent used by the preview and generated code token.

speednumber1Adjusts the animation timing multiplier for hover and looped motion.

motionnumber1Scales movement distance and emphasis across the interactive preview.

classNamestring''Optional class hook when dropping the component into a page or app.

Implementation Notes

Pure HTML and CSSAccessible checkbox inputWorks well for settings panels

Source Code

import "./signal-toggle.css";

export function SignalToggle() {
  return (
    <label className="sk-signal-toggle">
      <input type="checkbox" aria-label="Toggle signal mode" />
      <span><i /></span>
    </label>
  );
}

.sk-signal-toggle {
  --size: 84px;
  display: inline-grid;
  place-items: center;
}

.sk-signal-toggle input {
  position: absolute;
  opacity: 0;
}

.sk-signal-toggle span {
  width: var(--size);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #d5abff;
  background: linear-gradient(145deg, #252b35, #0c0f15);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

.sk-signal-toggle i {
  width: 26px;
  height: 18px;
  border: 3px solid currentColor;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
}

.sk-signal-toggle input:checked + span {
  color: #d5abff;
  background: linear-gradient(145deg, #1d2734, #090d13);
}

<label class="sk-signal-toggle">
  <input type="checkbox" aria-label="Toggle signal mode" />
  <span>
    <i></i>
  </span>
</label>

---
// Signal Toggle
---

<label class="sk-signal-toggle">
  <input type="checkbox" aria-label="Toggle signal mode" />
  <span>
    <i></i>
  </span>
</label>

<style>
.sk-signal-toggle {
  --size: 84px;
  display: inline-grid;
  place-items: center;
}

.sk-signal-toggle input {
  position: absolute;
  opacity: 0;
}

.sk-signal-toggle span {
  width: var(--size);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #d5abff;
  background: linear-gradient(145deg, #252b35, #0c0f15);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

.sk-signal-toggle i {
  width: 26px;
  height: 18px;
  border: 3px solid currentColor;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
}

.sk-signal-toggle input:checked + span {
  color: #d5abff;
  background: linear-gradient(145deg, #1d2734, #090d13);
}
</style>

Solar Pill ToggleA tiny light-mode toggle with a warm sun handle and compact pill shape.

33K views1.4K saves

toggles

Solar Pill Toggle

A tiny light-mode toggle with a warm sun handle and compact pill shape.

Preview CodeCSS

Customize

ColorTiming 1.00xMotion 100%

Props

PropertyTypeDefaultDescription

accentcolor#d5abffControls the primary accent used by the preview and generated code token.

speednumber1Adjusts the animation timing multiplier for hover and looped motion.

motionnumber1Scales movement distance and emphasis across the interactive preview.

classNamestring''Optional class hook when dropping the component into a page or app.

Implementation Notes

Tiny footprintNo external assetsGood for mobile toolbars

Source Code

import "./solar-pill-toggle.css";

export function SolarPillToggle() {
  return (
    <label className="sk-signal-toggle">
      <input type="checkbox" aria-label="Toggle signal mode" />
      <span><i /></span>
    </label>
  );
}

.sk-solar-toggle input { position: absolute; opacity: 0; }
.sk-solar-toggle span {
  display: block;
  width: 74px;
  height: 34px;
  border-radius: 999px;
  background: #fff2b8;
  border: 1px solid rgba(0,0,0,.08);
}
.sk-solar-toggle span::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  margin: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 22%, #fbbf24 24% 100%);
  transition: transform .24s ease;
}
.sk-solar-toggle input:checked + span::before { transform: translateX(40px); }

<label class="sk-solar-toggle"><input type="checkbox" /><span></span></label>

---
// Solar Pill Toggle
---

<label class="sk-solar-toggle"><input type="checkbox" /><span></span></label>

<style>
.sk-solar-toggle input { position: absolute; opacity: 0; }
.sk-solar-toggle span {
  display: block;
  width: 74px;
  height: 34px;
  border-radius: 999px;
  background: #fff2b8;
  border: 1px solid rgba(0,0,0,.08);
}
.sk-solar-toggle span::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  margin: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 22%, #fbbf24 24% 100%);
  transition: transform .24s ease;
}
.sk-solar-toggle input:checked + span::before { transform: translateX(40px); }
</style>

Glass Track SwitchA high-contrast on/off switch with a glossy thumb and neutral track.

49K views991 saves

toggles

Glass Track Switch

A high-contrast on/off switch with a glossy thumb and neutral track.

Preview CodeCSS

Customize

ColorTiming 1.00xMotion 100%

Props

PropertyTypeDefaultDescription

accentcolor#d5abffControls the primary accent used by the preview and generated code token.

speednumber1Adjusts the animation timing multiplier for hover and looped motion.

motionnumber1Scales movement distance and emphasis across the interactive preview.

classNamestring''Optional class hook when dropping the component into a page or app.

Implementation Notes

Large pointer targetTheme-friendly color tokensCompact settings UI

Source Code

import "./glass-track-switch.css";

export function GlassTrackSwitch() {
  return (
    <label className="sk-signal-toggle">
      <input type="checkbox" aria-label="Toggle signal mode" />
      <span><i /></span>
    </label>
  );
}

.sk-signal-toggle {
  --size: 84px;
  display: inline-grid;
  place-items: center;
}

.sk-signal-toggle input {
  position: absolute;
  opacity: 0;
}

.sk-signal-toggle span {
  width: var(--size);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #d5abff;
  background: linear-gradient(145deg, #252b35, #0c0f15);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

.sk-signal-toggle i {
  width: 26px;
  height: 18px;
  border: 3px solid currentColor;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
}

.sk-signal-toggle input:checked + span {
  color: #d5abff;
  background: linear-gradient(145deg, #1d2734, #090d13);
}

<label class="sk-signal-toggle">
  <input type="checkbox" aria-label="Toggle signal mode" />
  <span>
    <i></i>
  </span>
</label>

---
// Glass Track Switch
---

<label class="sk-signal-toggle">
  <input type="checkbox" aria-label="Toggle signal mode" />
  <span>
    <i></i>
  </span>
</label>

<style>
.sk-signal-toggle {
  --size: 84px;
  display: inline-grid;
  place-items: center;
}

.sk-signal-toggle input {
  position: absolute;
  opacity: 0;
}

.sk-signal-toggle span {
  width: var(--size);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #d5abff;
  background: linear-gradient(145deg, #252b35, #0c0f15);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

.sk-signal-toggle i {
  width: 26px;
  height: 18px;
  border: 3px solid currentColor;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
}

.sk-signal-toggle input:checked + span {
  color: #d5abff;
  background: linear-gradient(145deg, #1d2734, #090d13);
}
</style>

Create +

Magnetic CTA ButtonA vivid gradient call-to-action button for hero sections and conversion cards.

29K views647 saves

buttons

Magnetic CTA Button

A vivid gradient call-to-action button for hero sections and conversion cards.

Preview CodeHTML/CSS

Create +

Customize

ColorTiming 1.00xMotion 100%

Props

PropertyTypeDefaultDescription

accentcolor#d5abffControls the primary accent used by the preview and generated code token.

speednumber1Adjusts the animation timing multiplier for hover and looped motion.

motionnumber1Scales movement distance and emphasis across the interactive preview.

classNamestring''Optional class hook when dropping the component into a page or app.

Implementation Notes

Gradient surfaceArrow motion on hoverNo button shadow required

Source Code

import "./magnetic-cta-button.css";

export function MagneticCTAButton() {
  return (
    <button className="sk-glow-button">
      Start project <span aria-hidden="true">-&gt;</span>
    </button>
  );
}

.sk-glow-button {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  border: 1px solid rgba(213,171,255,.32);
  border-radius: 999px;
  padding: 0 1.1rem;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #ff66c4);
  font: 700 .92rem/1 Inter, system-ui, sans-serif;
}

.sk-glow-button span {
  transition: transform .2s ease;
}

.sk-glow-button:hover span {
  transform: translateX(3px);
}

<button class="sk-glow-button">
  Start project
  <span aria-hidden="true">-></span>
</button>

---
// Magnetic CTA Button
---

<button class="sk-glow-button">
  Start project
  <span aria-hidden="true">-></span>
</button>

<style>
.sk-glow-button {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  border: 1px solid rgba(213,171,255,.32);
  border-radius: 999px;
  padding: 0 1.1rem;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #ff66c4);
  font: 700 .92rem/1 Inter, system-ui, sans-serif;
}

.sk-glow-button span {
  transition: transform .2s ease;
}

.sk-glow-button:hover span {
  transform: translateX(3px);
}
</style>

Start ->

Soft Press ButtonA minimal button with a pressed state that keeps visual noise low.

18K views302 saves

buttons

Soft Press Button

A minimal button with a pressed state that keeps visual noise low.

Preview CodeHTML/CSS

Start ->

Customize

ColorTiming 1.00xMotion 100%

Props

PropertyTypeDefaultDescription

accentcolor#d5abffControls the primary accent used by the preview and generated code token.

speednumber1Adjusts the animation timing multiplier for hover and looped motion.

motionnumber1Scales movement distance and emphasis across the interactive preview.

classNamestring''Optional class hook when dropping the component into a page or app.

Implementation Notes

Subtle hover feedbackRounded 8px shapeIdeal for dashboard actions

Source Code

import "./soft-press-button.css";

export function SoftPressButton() {
  return (
    <button className="sk-glow-button">
      Start project <span aria-hidden="true">-&gt;</span>
    </button>
  );
}

.sk-glow-button {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  border: 1px solid rgba(213,171,255,.32);
  border-radius: 999px;
  padding: 0 1.1rem;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #ff66c4);
  font: 700 .92rem/1 Inter, system-ui, sans-serif;
}

.sk-glow-button span {
  transition: transform .2s ease;
}

.sk-glow-button:hover span {
  transform: translateX(3px);
}

<button class="sk-glow-button">
  Start project
  <span aria-hidden="true">-></span>
</button>

---
// Soft Press Button
---

<button class="sk-glow-button">
  Start project
  <span aria-hidden="true">-></span>
</button>

<style>
.sk-glow-button {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  border: 1px solid rgba(213,171,255,.32);
  border-radius: 999px;
  padding: 0 1.1rem;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #ff66c4);
  font: 700 .92rem/1 Inter, system-ui, sans-serif;
}

.sk-glow-button span {
  transition: transform .2s ease;
}

.sk-glow-button:hover span {
  transform: translateX(3px);
}
</style>

Cmd Publish

Command ButtonA small command-style button with keyboard hint text.

41K views1.6K saves

buttons

Command Button

A small command-style button with keyboard hint text.

Preview CodeReact

Cmd Publish

Customize

ColorTiming 1.00xMotion 100%

Props

PropertyTypeDefaultDescription

accentcolor#d5abffControls the primary accent used by the preview and generated code token.

speednumber1Adjusts the animation timing multiplier for hover and looped motion.

motionnumber1Scales movement distance and emphasis across the interactive preview.

classNamestring''Optional class hook when dropping the component into a page or app.

Implementation Notes

Icon and shortcut readyAccessible labelGood for editor tools

Source Code

import "./command-button.css";

export function CommandButton() {
  return (
    <button className="sk-glow-button">
      Start project <span aria-hidden="true">-&gt;</span>
    </button>
  );
}

.sk-glow-button {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  border: 1px solid rgba(213,171,255,.32);
  border-radius: 999px;
  padding: 0 1.1rem;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #ff66c4);
  font: 700 .92rem/1 Inter, system-ui, sans-serif;
}

.sk-glow-button span {
  transition: transform .2s ease;
}

.sk-glow-button:hover span {
  transform: translateX(3px);
}

<button class="sk-glow-button">
  Start project
  <span aria-hidden="true">-></span>
</button>

---
// Command Button
---

<button class="sk-glow-button">
  Start project
  <span aria-hidden="true">-></span>
</button>

<style>
.sk-glow-button {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  border: 1px solid rgba(213,171,255,.32);
  border-radius: 999px;
  padding: 0 1.1rem;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #ff66c4);
  font: 700 .92rem/1 Inter, system-ui, sans-serif;
}

.sk-glow-button span {
  transition: transform .2s ease;
}

.sk-glow-button:hover span {
  transform: translateX(3px);
}
</style>

Launch fasterShip beautiful interfaces

SaaS Launch HeroA full-bleed hero section with a product signal, CTA row, and gradient stage.

52K views2.1K saves

heroes

SaaS Launch Hero

A full-bleed hero section with a product signal, CTA row, and gradient stage.

Preview CodeAstro

Launch fasterShip beautiful interfaces

Customize

ColorTiming 1.00xMotion 100%

Props

PropertyTypeDefaultDescription

accentcolor#d5abffControls the primary accent used by the preview and generated code token.

speednumber1Adjusts the animation timing multiplier for hover and looped motion.

motionnumber1Scales movement distance and emphasis across the interactive preview.

classNamestring''Optional class hook when dropping the component into a page or app.

Implementation Notes

Static HTML friendlyClear first viewport offerBuilt for fast landing pages

Source Code

import "./saas-launch-hero.css";

export function SaaSLaunchHero() {
  return (
    <section className="sk-hero">
      <p>Launch faster</p>
      <h1>Design systems for teams that ship.</h1>
      <a href="/contact">Book a build sprint</a>
    </section>
  );
}

.sk-hero {
  min-height: 520px;
  display: grid;
  align-content: center;
  gap: 1rem;
  padding: clamp(3rem, 8vw, 7rem);
  color: #f8f8ff;
  background:
    linear-gradient(135deg, rgba(213,171,255,.2), transparent 42%),
    linear-gradient(135deg, #05070a, #121a27);
}

.sk-hero h1 {
  max-width: 760px;
  font: 800 clamp(3rem, 9vw, 7rem)/.95 Sora, Inter, sans-serif;
}

.sk-hero a {
  width: max-content;
  border-radius: 999px;
  padding: .9rem 1.2rem;
  background: #d5abff;
  color: #050208;
  font-weight: 800;
}

<section class="sk-hero">
  <p>Launch faster</p>
  <h1>Design systems for teams that ship.</h1>
  <a href="/contact">Book a build sprint</a>
</section>

---
// SaaS Launch Hero
---

<section class="sk-hero">
  <p>Launch faster</p>
  <h1>Design systems for teams that ship.</h1>
  <a href="/contact">Book a build sprint</a>
</section>

<style>
.sk-hero {
  min-height: 520px;
  display: grid;
  align-content: center;
  gap: 1rem;
  padding: clamp(3rem, 8vw, 7rem);
  color: #f8f8ff;
  background:
    linear-gradient(135deg, rgba(213,171,255,.2), transparent 42%),
    linear-gradient(135deg, #05070a, #121a27);
}

.sk-hero h1 {
  max-width: 760px;
  font: 800 clamp(3rem, 9vw, 7rem)/.95 Sora, Inter, sans-serif;
}

.sk-hero a {
  width: max-content;
  border-radius: 999px;
  padding: .9rem 1.2rem;
  background: #d5abff;
  color: #050208;
  font-weight: 800;
}
</style>

Web growth sprintFast sites. Real leads.98

Agency Proof HeroA compact service hero with metric chips and a productized offer.

36K views1.2K saves

heroes

Agency Proof Hero

A compact service hero with metric chips and a productized offer.

Preview CodeAstro

Web growth sprintFast sites. Real leads.98

Customize

ColorTiming 1.00xMotion 100%

Props

PropertyTypeDefaultDescription

accentcolor#d5abffControls the primary accent used by the preview and generated code token.

speednumber1Adjusts the animation timing multiplier for hover and looped motion.

motionnumber1Scales movement distance and emphasis across the interactive preview.

classNamestring''Optional class hook when dropping the component into a page or app.

Implementation Notes

Service page readyFast LCP structureSimple content hierarchy

Source Code

import "./agency-proof-hero.css";

export function AgencyProofHero() {
  return (
    <section className="sk-hero">
      <p>Launch faster</p>
      <h1>Design systems for teams that ship.</h1>
      <a href="/contact">Book a build sprint</a>
    </section>
  );
}

.sk-hero {
  min-height: 520px;
  display: grid;
  align-content: center;
  gap: 1rem;
  padding: clamp(3rem, 8vw, 7rem);
  color: #f8f8ff;
  background:
    linear-gradient(135deg, rgba(213,171,255,.2), transparent 42%),
    linear-gradient(135deg, #05070a, #121a27);
}

.sk-hero h1 {
  max-width: 760px;
  font: 800 clamp(3rem, 9vw, 7rem)/.95 Sora, Inter, sans-serif;
}

.sk-hero a {
  width: max-content;
  border-radius: 999px;
  padding: .9rem 1.2rem;
  background: #d5abff;
  color: #050208;
  font-weight: 800;
}

<section class="sk-hero">
  <p>Launch faster</p>
  <h1>Design systems for teams that ship.</h1>
  <a href="/contact">Book a build sprint</a>
</section>

---
// Agency Proof Hero
---

<section class="sk-hero">
  <p>Launch faster</p>
  <h1>Design systems for teams that ship.</h1>
  <a href="/contact">Book a build sprint</a>
</section>

<style>
.sk-hero {
  min-height: 520px;
  display: grid;
  align-content: center;
  gap: 1rem;
  padding: clamp(3rem, 8vw, 7rem);
  color: #f8f8ff;
  background:
    linear-gradient(135deg, rgba(213,171,255,.2), transparent 42%),
    linear-gradient(135deg, #05070a, #121a27);
}

.sk-hero h1 {
  max-width: 760px;
  font: 800 clamp(3rem, 9vw, 7rem)/.95 Sora, Inter, sans-serif;
}

.sk-hero a {
  width: max-content;
  border-radius: 999px;
  padding: .9rem 1.2rem;
  background: #d5abff;
  color: #050208;
  font-weight: 800;
}
</style>

Glass NavbarA transparent navbar pattern for dark hero sections and sticky headers.

44K views929 saves

navbars

Glass Navbar

A transparent navbar pattern for dark hero sections and sticky headers.

Preview CodeHTML/CSS

Customize

ColorTiming 1.00xMotion 100%

Props

PropertyTypeDefaultDescription

accentcolor#d5abffControls the primary accent used by the preview and generated code token.

speednumber1Adjusts the animation timing multiplier for hover and looped motion.

motionnumber1Scales movement distance and emphasis across the interactive preview.

classNamestring''Optional class hook when dropping the component into a page or app.

Implementation Notes

Blurred panelClear active actionResponsive-friendly structure

Source Code

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>
  );
}

.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;
}

<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>

---
// 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>

Compact Nav TabsA small segmented navigation control for product pages and docs.

21K views438 saves

navbars

Compact Nav Tabs

A small segmented navigation control for product pages and docs.

Preview CodeHTML/CSS

Customize

ColorTiming 1.00xMotion 100%

Props

PropertyTypeDefaultDescription

accentcolor#d5abffControls the primary accent used by the preview and generated code token.

speednumber1Adjusts the animation timing multiplier for hover and looped motion.

motionnumber1Scales movement distance and emphasis across the interactive preview.

classNamestring''Optional class hook when dropping the component into a page or app.

Implementation Notes

Keyboard friendly linksWorks inside cardsUseful for demo filters

Source Code

import "./compact-nav-tabs.css";

export function CompactNavTabs() {
  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>
  );
}

.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;
}

<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>

---
// Compact Nav Tabs
---

<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>

Core Web Vitals98

Metric Proof CardA trust-building metric card with a bold score and short proof note.

31K views684 saves

cards

Metric Proof Card

A trust-building metric card with a bold score and short proof note.

Preview CodeHTML/CSS

Core Web Vitals98

Customize

ColorTiming 1.00xMotion 100%

Props

PropertyTypeDefaultDescription

accentcolor#d5abffControls the primary accent used by the preview and generated code token.

speednumber1Adjusts the animation timing multiplier for hover and looped motion.

motionnumber1Scales movement distance and emphasis across the interactive preview.

classNamestring''Optional class hook when dropping the component into a page or app.

Implementation Notes

Great for service pagesUses semantic article markupDesigned for scanability

Source Code

import "./metric-proof-card.css";

export function MetricProofCard() {
  return (
    <article className="sk-metric-card">
      <span>Core Web Vitals</span>
      <strong>98</strong>
      <p>Performance score after launch tuning.</p>
    </article>
  );
}

.sk-metric-card {
  width: min(100%, 320px);
  border: 1px solid rgba(213,171,255,.16);
  border-radius: 8px;
  padding: 1.25rem;
  color: #f8f8ff;
  background:
    linear-gradient(135deg, rgba(213,171,255,.14), transparent 44%),
    rgba(9,13,20,.82);
}

.sk-metric-card strong {
  display: block;
  margin: .45rem 0;
  font: 800 4rem/1 Sora, Inter, sans-serif;
}

<article class="sk-metric-card">
  <span>Core Web Vitals</span>
  <strong>98</strong>
  <p>Performance score after launch tuning.</p>
</article>

---
// Metric Proof Card
---

<article class="sk-metric-card">
  <span>Core Web Vitals</span>
  <strong>98</strong>
  <p>Performance score after launch tuning.</p>
</article>

<style>
.sk-metric-card {
  width: min(100%, 320px);
  border: 1px solid rgba(213,171,255,.16);
  border-radius: 8px;
  padding: 1.25rem;
  color: #f8f8ff;
  background:
    linear-gradient(135deg, rgba(213,171,255,.14), transparent 44%),
    rgba(9,13,20,.82);
}

.sk-metric-card strong {
  display: block;
  margin: .45rem 0;
  font: 800 4rem/1 Sora, Inter, sans-serif;
}
</style>

Template

Stacked Resource CardA layered resource card for downloads, templates, and lead magnets.

27K views598 saves

cards

Stacked Resource Card

A layered resource card for downloads, templates, and lead magnets.

Preview CodeHTML/CSS

Template

Customize

ColorTiming 1.00xMotion 100%

Props

PropertyTypeDefaultDescription

accentcolor#d5abffControls the primary accent used by the preview and generated code token.

speednumber1Adjusts the animation timing multiplier for hover and looped motion.

motionnumber1Scales movement distance and emphasis across the interactive preview.

classNamestring''Optional class hook when dropping the component into a page or app.

Implementation Notes

Useful internal-link blockScales in a gridKeeps visual hierarchy tight

Source Code

import "./stacked-resource-card.css";

export function StackedResourceCard() {
  return (
    <article className="sk-metric-card">
      <span>Core Web Vitals</span>
      <strong>98</strong>
      <p>Performance score after launch tuning.</p>
    </article>
  );
}

.sk-metric-card {
  width: min(100%, 320px);
  border: 1px solid rgba(213,171,255,.16);
  border-radius: 8px;
  padding: 1.25rem;
  color: #f8f8ff;
  background:
    linear-gradient(135deg, rgba(213,171,255,.14), transparent 44%),
    rgba(9,13,20,.82);
}

.sk-metric-card strong {
  display: block;
  margin: .45rem 0;
  font: 800 4rem/1 Sora, Inter, sans-serif;
}

<article class="sk-metric-card">
  <span>Core Web Vitals</span>
  <strong>98</strong>
  <p>Performance score after launch tuning.</p>
</article>

---
// Stacked Resource Card
---

<article class="sk-metric-card">
  <span>Core Web Vitals</span>
  <strong>98</strong>
  <p>Performance score after launch tuning.</p>
</article>

<style>
.sk-metric-card {
  width: min(100%, 320px);
  border: 1px solid rgba(213,171,255,.16);
  border-radius: 8px;
  padding: 1.25rem;
  color: #f8f8ff;
  background:
    linear-gradient(135deg, rgba(213,171,255,.14), transparent 44%),
    rgba(9,13,20,.82);
}

.sk-metric-card strong {
  display: block;
  margin: .45rem 0;
  font: 800 4rem/1 Sora, Inter, sans-serif;
}
</style>

Pulse LoaderA tiny loading indicator with three motion dots and reduced-motion fallback.

19K views317 saves

loaders

Pulse Loader

A tiny loading indicator with three motion dots and reduced-motion fallback.

Preview CodeCSS

Customize

ColorTiming 1.00xMotion 100%

Props

PropertyTypeDefaultDescription

accentcolor#d5abffControls the primary accent used by the preview and generated code token.

speednumber1Adjusts the animation timing multiplier for hover and looped motion.

motionnumber1Scales movement distance and emphasis across the interactive preview.

classNamestring''Optional class hook when dropping the component into a page or app.

Implementation Notes

Role status readySmall CSS footprintGood for form submits

Source Code

import "./pulse-loader.css";

export function PulseLoader() {
  return (
    <div className="sk-pulse-loader" role="status" aria-label="Loading">
      <span /><span /><span />
    </div>
  );
}

.sk-pulse-loader {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.sk-pulse-loader span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #d5abff;
  animation: sk-pulse .7s ease-in-out infinite alternate;
}

.sk-pulse-loader span:nth-child(2) { animation-delay: .12s; }
.sk-pulse-loader span:nth-child(3) { animation-delay: .24s; }

@keyframes sk-pulse {
  to { transform: translateY(-8px); opacity: .45; }
}

<div class="sk-pulse-loader" role="status" aria-label="Loading">
  <span></span><span></span><span></span>
</div>

---
// Pulse Loader
---

<div class="sk-pulse-loader" role="status" aria-label="Loading">
  <span></span><span></span><span></span>
</div>

<style>
.sk-pulse-loader {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.sk-pulse-loader span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #d5abff;
  animation: sk-pulse .7s ease-in-out infinite alternate;
}

.sk-pulse-loader span:nth-child(2) { animation-delay: .12s; }
.sk-pulse-loader span:nth-child(3) { animation-delay: .24s; }

@keyframes sk-pulse {
  to { transform: translateY(-8px); opacity: .45; }
}
</style>

Orbit LoaderA circular progress motif for preview panes and async widgets.

24K views421 saves

loaders

Orbit Loader

A circular progress motif for preview panes and async widgets.

Preview CodeCSS

Customize

ColorTiming 1.00xMotion 100%

Props

PropertyTypeDefaultDescription

accentcolor#d5abffControls the primary accent used by the preview and generated code token.

speednumber1Adjusts the animation timing multiplier for hover and looped motion.

motionnumber1Scales movement distance and emphasis across the interactive preview.

classNamestring''Optional class hook when dropping the component into a page or app.

Implementation Notes

CSS-only rotationCompact SVG-free visualGood for loading previews

Source Code

import "./orbit-loader.css";

export function OrbitLoader() {
  return (
    <div className="sk-pulse-loader" role="status" aria-label="Loading">
      <span /><span /><span />
    </div>
  );
}

.sk-pulse-loader {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.sk-pulse-loader span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #d5abff;
  animation: sk-pulse .7s ease-in-out infinite alternate;
}

.sk-pulse-loader span:nth-child(2) { animation-delay: .12s; }
.sk-pulse-loader span:nth-child(3) { animation-delay: .24s; }

@keyframes sk-pulse {
  to { transform: translateY(-8px); opacity: .45; }
}

<div class="sk-pulse-loader" role="status" aria-label="Loading">
  <span></span><span></span><span></span>
</div>

---
// Orbit Loader
---

<div class="sk-pulse-loader" role="status" aria-label="Loading">
  <span></span><span></span><span></span>
</div>

<style>
.sk-pulse-loader {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.sk-pulse-loader span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #d5abff;
  animation: sk-pulse .7s ease-in-out infinite alternate;
}

.sk-pulse-loader span:nth-child(2) { animation-delay: .12s; }
.sk-pulse-loader span:nth-child(3) { animation-delay: .24s; }

@keyframes sk-pulse {
  to { transform: translateY(-8px); opacity: .45; }
}
</style>

Email address

Floating Label InputA polished input field with a floating label and clear focus state.

35K views903 saves

forms

Floating Label Input

A polished input field with a floating label and clear focus state.

Preview CodeHTML/CSS

Email address

Customize

ColorTiming 1.00xMotion 100%

Props

PropertyTypeDefaultDescription

accentcolor#d5abffControls the primary accent used by the preview and generated code token.

speednumber1Adjusts the animation timing multiplier for hover and looped motion.

motionnumber1Scales movement distance and emphasis across the interactive preview.

classNamestring''Optional class hook when dropping the component into a page or app.

Implementation Notes

Label remains visibleWorks without JavaScriptGood for contact forms

Source Code

import "./floating-label-input.css";

export function FloatingLabelInput() {
  return (
    <label className="sk-field">
      <input placeholder=" " type="email" />
      <span>Email address</span>
    </label>
  );
}

.sk-field {
  position: relative;
  display: block;
  width: min(100%, 320px);
}

.sk-field input {
  width: 100%;
  height: 52px;
  border: 1px solid rgba(213,171,255,.24);
  border-radius: 8px;
  padding: 1.1rem .95rem .45rem;
  color: #f8f8ff;
  background: rgba(255,255,255,.06);
}

.sk-field span {
  position: absolute;
  left: .95rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(248,248,255,.55);
  transition: .18s ease;
}

.sk-field input:focus + span,
.sk-field input:not(:placeholder-shown) + span {
  top: .55rem;
  transform: none;
  font-size: .72rem;
}

<label class="sk-field">
  <input placeholder=" " type="email" />
  <span>Email address</span>
</label>

---
// Floating Label Input
---

<label class="sk-field">
  <input placeholder=" " type="email" />
  <span>Email address</span>
</label>

<style>
.sk-field {
  position: relative;
  display: block;
  width: min(100%, 320px);
}

.sk-field input {
  width: 100%;
  height: 52px;
  border: 1px solid rgba(213,171,255,.24);
  border-radius: 8px;
  padding: 1.1rem .95rem .45rem;
  color: #f8f8ff;
  background: rgba(255,255,255,.06);
}

.sk-field span {
  position: absolute;
  left: .95rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(248,248,255,.55);
  transition: .18s ease;
}

.sk-field input:focus + span,
.sk-field input:not(:placeholder-shown) + span {
  top: .55rem;
  transform: none;
  font-size: .72rem;
}
</style>

Newsletter StripA small email capture strip with a button and compact visual rhythm.

17K views244 saves

forms

Newsletter Strip

A small email capture strip with a button and compact visual rhythm.

Preview CodeHTML/CSS

Customize

ColorTiming 1.00xMotion 100%

Props

PropertyTypeDefaultDescription

accentcolor#d5abffControls the primary accent used by the preview and generated code token.

speednumber1Adjusts the animation timing multiplier for hover and looped motion.

motionnumber1Scales movement distance and emphasis across the interactive preview.

classNamestring''Optional class hook when dropping the component into a page or app.

Implementation Notes

Inline form structureMobile-friendly layoutClear conversion target

Source Code

import "./newsletter-strip.css";

export function NewsletterStrip() {
  return (
    <label className="sk-field">
      <input placeholder=" " type="email" />
      <span>Email address</span>
    </label>
  );
}

.sk-field {
  position: relative;
  display: block;
  width: min(100%, 320px);
}

.sk-field input {
  width: 100%;
  height: 52px;
  border: 1px solid rgba(213,171,255,.24);
  border-radius: 8px;
  padding: 1.1rem .95rem .45rem;
  color: #f8f8ff;
  background: rgba(255,255,255,.06);
}

.sk-field span {
  position: absolute;
  left: .95rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(248,248,255,.55);
  transition: .18s ease;
}

.sk-field input:focus + span,
.sk-field input:not(:placeholder-shown) + span {
  top: .55rem;
  transform: none;
  font-size: .72rem;
}

<label class="sk-field">
  <input placeholder=" " type="email" />
  <span>Email address</span>
</label>

---
// Newsletter Strip
---

<label class="sk-field">
  <input placeholder=" " type="email" />
  <span>Email address</span>
</label>

<style>
.sk-field {
  position: relative;
  display: block;
  width: min(100%, 320px);
}

.sk-field input {
  width: 100%;
  height: 52px;
  border: 1px solid rgba(213,171,255,.24);
  border-radius: 8px;
  padding: 1.1rem .95rem .45rem;
  color: #f8f8ff;
  background: rgba(255,255,255,.06);
}

.sk-field span {
  position: absolute;
  left: .95rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(248,248,255,.55);
  transition: .18s ease;
}

.sk-field input:focus + span,
.sk-field input:not(:placeholder-shown) + span {
  top: .55rem;
  transform: none;
  font-size: .72rem;
}
</style>