@ryanhelsing/ry-ui

<ry> <page>  <header sticky> <cluster> <strong>ry-ui</strong> </cluster> <cluster> <a href="/demos">Demos</a> <a href="#features">Features</a> <a href="#pricing">Pricing</a> <a href="#faq">FAQ</a> <ry-button variant="outline" size="sm">Sign In</ry-button> <ry-button size="sm">Get Started</ry-button> </cluster> </header> <main>  <hero align="center" size="lg"> <ry-badge>Open Source</ry-badge> <h1>Build apps faster with<br>universal components</h1> <p>Framework-agnostic, Light DOM web components. Write once in HTML/CSS/JS. Deploy everywhere. No decisions to make. No architecture to debate.</p> <cluster> <ry-button size="lg">Get Started Free</ry-button> <ry-button variant="outline" size="lg">View on GitHub</ry-button> </cluster> </hero>  <section> <grid cols="4"> <stat value="32" label="Components"></stat> <stat value="7KB" label="Gzipped"></stat> <stat value="0" label="Dependencies"></stat> <stat value="3" label="Themes"></stat> </grid> </section>  <section class="ry-logo-bar"> <p>Trusted by teams at</p> <cluster> <span>Acme</span> <span>Globex</span> <span>Initech</span> <span>Umbrella</span> <span>Stark</span> </cluster> </section>  <section id="features"> <hero align="center" size="sm"> <h2>Everything you need, nothing you don't</h2> <p>Every app is a composition of the same finite primitives. We built them all — so you never have to again.</p> </hero> <feature-grid cols="3"> <feature icon="star" align="center"> <h3>Zero Dependencies</h3> <p>Pure web standards. No framework lock-in, no build step required, no node_modules bloat.</p> </feature> <feature icon="moon" align="center"> <h3>Dark Mode Built In</h3> <p>Every component supports light and dark mode out of the box via CSS custom properties.</p> </feature> <feature icon="settings" align="center"> <h3>Fully Themeable</h3> <p>Swap the entire visual layer without touching structure or behavior. Three independent layers.</p> </feature> <feature icon="check" align="center"> <h3>Accessible</h3> <p>Keyboard navigation, ARIA attributes, and focus management handled for every component.</p> </feature> <feature icon="download" align="center"> <h3>Light DOM</h3> <p>No Shadow DOM. Your CSS works. Your selectors work. Inspect and style anything.</p> </feature> <feature icon="heart" align="center"> <h3>Developer Friendly</h3> <p>Clean API, strict TypeScript, comprehensive docs. Read the source in minutes.</p> </feature> </feature-grid> </section>  <section> <hero align="center" size="sm"> <h2>Loved by developers</h2> <p>Teams ship faster when they stop reinventing the same UI primitives.</p> </hero> <grid cols="3"> <testimonial stars="5" avatar="https://i.pravatar.cc/128?img=1" name="Sarah Chen" role="CTO, Acme Corp"> We rebuilt our entire admin dashboard in a weekend. The component library just works — no fighting with frameworks. </testimonial> <testimonial stars="5" avatar="https://i.pravatar.cc/128?img=3" name="Marcus Johnson" role="Lead Engineer, StartupCo"> Finally, components that don't force you into a specific framework. We use these across React, Vue, and vanilla JS projects. </testimonial> <testimonial stars="5" avatar="https://i.pravatar.cc/128?img=5" name="Emily Park" role="Design Lead, BigCo"> The FORM/THEME separation is brilliant. Our design team can iterate on visuals without touching any JavaScript. </testimonial> </grid> </section>  <section id="pricing"> <hero align="center" size="sm"> <h2>Simple, transparent pricing</h2> <p>Start free. Scale when you're ready.</p> </hero> <pricing> <pricing-card title="Starter" price="$0/mo"> <ul class="ry-check-list"> <li>All components</li> <li>3 themes included</li> <li>Community support</li> <li>MIT licensed</li> </ul> <ry-button variant="outline">Get Started</ry-button> </pricing-card> <pricing-card featured title="Pro" price="$29/mo"> <ul class="ry-check-list"> <li>Everything in Starter</li> <li>Premium themes</li> <li>Priority support</li> <li>Custom theme builder</li> <li>Figma kit</li> </ul> <ry-button>Choose Pro</ry-button> </pricing-card> <pricing-card title="Enterprise" price="Custom"> <ul class="ry-check-list"> <li>Everything in Pro</li> <li>Dedicated support</li> <li>Custom components</li> <li>SLA guarantee</li> <li>On-premise option</li> </ul> <ry-button variant="outline">Contact Sales</ry-button> </pricing-card> </pricing> </section>  <section id="faq" narrow> <hero align="center" size="sm"> <h2>Frequently asked questions</h2> </hero> <accordion> <accordion-item title="Do I need a framework to use ry-ui?"> No. ry-ui components are vanilla web components that work in any HTML page. They also work seamlessly inside React, Vue, Svelte, Angular, or any other framework. </accordion-item> <accordion-item title="How does theming work?"> Every component has three independent layers: Function (JS behavior), Form (CSS layout), and Theme (CSS visuals). You can swap the entire theme without touching layout or behavior. Themes are just CSS files that override design tokens. </accordion-item> <accordion-item title="Is ry-ui accessible?"> Yes. All interactive components include proper ARIA attributes, keyboard navigation, and focus management. We follow WAI-ARIA patterns for every component. </accordion-item> <accordion-item title="Can I use my own CSS framework alongside ry-ui?"> Absolutely. ry-ui uses Light DOM (no Shadow DOM), so your existing CSS selectors and frameworks work as expected. You can load only the structure CSS and bring your own visual theme. </accordion-item> <accordion-item title="What's the bundle size?"> The full JS bundle is ~32KB (7KB gzipped) with zero dependencies. CSS is similarly lightweight. You're shipping less code than most icon libraries. </accordion-item> </accordion> </section>  <hero align="center" size="lg"> <h2>Ready to build?</h2> <p>Stop reinventing UI primitives. Start shipping.</p> <cluster> <ry-button size="lg">Get Started Free</ry-button> <ry-button variant="outline" size="lg">Read the Docs</ry-button> </cluster> </hero> </main>  <footer> <cluster> <span>© 2026 ry-ui. MIT License.</span> </cluster> <cluster> <a href="#">GitHub</a> <a href="#">Docs</a> <a href="#">NPM</a> </cluster> </footer> </page> <ry-theme-panel></ry-theme-panel>