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/solar-pill-toggleUsage (with your settings)
A compact React example generated from this template data.
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> );}Code
Switch between HTML, CSS, TSX, and Astro versions.
<label class="sk-solar-toggle"><input type="checkbox" /><span></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); }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> );}---// 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>Copy Prompt
Use this prompt to recreate or extend the element with the same intent.
Create a polished Solar Pill Toggle 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 tiny light-mode toggle with a warm sun handle and compact pill shape.
Variations
2 related patterns from this category.
Implementation Notes
Small details that make this template useful in production pages.
Tiny footprint
No external assets
Good for mobile toolbars