Styleframe

We've put the Open Components standard behind an MCP server: 11 components and 411 rules so far. Connect it, and your agent checks your implementation against a component's contract, rule by rule. Free, no sign-in. We'd love to hear how it goes. opencomponents.dev/docs/getting...

Buttons are the most common interactive component. So the Button is Open Component's first component page. We've written the guidelines for one that looks right, works for everyone and can be checked by your agents, with code examples in seven frameworks. opencomponents.dev/docs/compone...

I'm starting Open Components, an open standard for UI components that work for people, developers and AI agents. I've spent 10 years building UI libraries and trying to perfect the components in them. Now I want to share what I've learned 🧵

POV: your CSS utility classes read like natural CSS, and stay under your control, type-checked. • Tailwind: bg-pirmary → Why is my button still gray!? • Styleframe: _background:pirmary → Error: Variable "color.pirmary" is not defined Port your codebase to Styleframe styleframe.dev/docs/getting...

If you know Tailwind's responsive prefixes, you already know Styleframe's. The sm / md / lg / xl / 2xl utility class modifiers now ship in the theme preset. The prefix resolves to a real media query out of the box.

styleframe 3.9.0 is out 🎉 20+ new component recipes in a single release: Select, Switch, Slider, Tabs, Accordion, Calendar, ColorPicker, OTP, Drawer, Sidebar, plus the full form-field lineup. Type-safe design systems in TypeScript, compiled to CSS. github.com/styleframe-d...

Making huge progress on Inkline 5! 🚀 We're building a compiler that speaks 7 frameworks: React, Vue, Solid, Svelte, Angular, Astro and Qwik. Already shipped: - static rendering - styling via @styleframe.dev - props - slots - context All components come in headless and styled versions.

We've just restructured our docs navigation. 📖 • The most useful theme links, directly in the sub-nav. • Elements and components are now grouped by category • Each section or direct page comes with a relevant icon www.styleframe.dev/docs/getting...

Styleframe v3.8.0 is out! 🚀 Smaller output, smarter scanning, and a tighter Figma workflow. • Build-time class name shortening • Dynamic utilities for unmatched CSS properties • Figma specific export/import via CLI • Recipe-level tree-shaking • Now on Vite 8 w/ Rolldown + oxc

Community highlights ✨ - @deno.land shares Deno 2.8 update - @typescriptlang.org highlights VS Code type checked with TS 7 - @styleframe.dev launches new playground for TypeScript design system engine - @vanilagy.bsky.social introduces mediabunny, a type-safe ffmpeg wrapper

Should we tree-shake recipes next? 🚀

We've just released styleframe@3.7.0! 🎉 What's new: · Variable and utility usage detection and purging for much leaner outputs · Unified fluid and static font size design tokens · Named Props types exported from the virtual module · Rewritten 15min guide, new Elements docs, and a framework switcher

Our documentation now features a select menu to choose from @react.dev, @vuejs.org and vanilla @typescriptlang.org in the code examples. Which framework would you like to see next? #opensource #foss #webdev

We're welcoming contributions from all of our community! 💚 We've added a complete CONTRIBUTING guide to help you get started: github.com/styleframe-d... #opensource #foss

Styleframe now has a playground! Write type-safe CSS in your browser and see it render instantly. No install, no config. Just try it live: play.styleframe.dev #typescript #css #webdev

Your design tokens shouldn't live in two places. The `pnpx styleframe dtcg export` command emits spec-conformant W3C DTCG JSON. Figma reads it. Style Dictionary reads it. Tokens Studio reads it. Bidirectional. Free. No limits.

Designers, how are you handling design token updates from your dev team right now? Manual edits? A plugin? Pretending it's not a problem? Tokens should live in code and land in @figma.com without anyone retyping a hex value. Forever free → styleframe.dev/figma

Tailwind JIT scans your templates. So does Styleframe, except every utility is a factory function you registered. Don't like .bg-primary? Swap functions and you've got ._background:primary. Same transpiler, your naming. Complete control. #webdev #tailwindcss #typescript #css

The Styleframe recipe runtime is ~1.4KB ESM, dependency-free, and only ships if you actually define a recipe. No recipes = static CSS, zero JS in the bundle. ⚡ #webdev #css #typescript

We’re one step closer to building high quality Design Systems in a matter of minutes. And no, you don’t even need AI to do it. 🚫🤖 We shipped 12 hand-tuned, highly configurable Styleframe recipes for components in the past two weeks. #css #typescript #designsystem #ui #ux

We just shipped Styleframe v3.3.0 🎉 Introducing the first recipes for our default theme: a big step toward a fully composable design system. - Badge & Button components with beautiful defaults - Fully type-safe - Consistent, scalable theming bit.ly/47lQ6kU #TypeScript #CSS #DesignSystems

Styleframe v3.2.0 is live! 🎉 The `@variablename` syntax is now widely supported for safely referencing variables in other variables, refs, selectors, utilities and recipes. #TypeScript #CSS #DesignSystems

Styleframe v3.0.0 is live! 🎉 • Global Styleframe instance with extension files • Scanner plugin with Tailwind-like utility support - write utility classes in markup and auto-generate the styles Read more: github.com/styleframe-d... #DesignSystems #TypeScript #CSS #WebDev

Styleframe v2.6.0 is out 🚀 ✨ Big one: Figma plugin for importing/exporting Styleframe design tokens as Figma Variables (DTCG-friendly) - keeping design + code in sync. Changelog: github.com/styleframe-d...

If your "single source of truth" is manually entering tokens in both code and Figma... we need to talk. 🆕 Styleframe – Design Token Sync (Figma) ✅ W3C DTCG import/export ✅ Figma Variables + aliases preserved ✅ Multi-mode themes intact (light/dark) styleframe.dev/figma #figma #dtcg

🚀 Styleframe v2.5.0 is out! New design token presets, clearer APIs, API improvements to make styling in TypeScript even better. 🔥 Dive in: github.com/styleframe-d... #webdevelopment #css #typescript #ui #ux #dx

Just shipped over 200 pre-made utility classes generators to Styleframe! ⚡ Flexbox, Grid, Typography, Transforms, Spacing... 15 categories total. Tailwind-style utilities, fully type-safe and under your complete control: www.styleframe.dev/docs/utilities #webdev #ui #ux #dx

🎉 Happy New Year! Kicking off 2026 with a big one: styleframe Recipes are out today 🚀 Type-safe, variant-driven component styling with static CSS, zero runtime overhead fully integrated into Styleframe. Can’t wait to see what you build! ✨ #ui #ux #dx #webdev

Something new is cooking in Styleframe's kitchen... 🍳 Recipes are coming soon. Typed variants, auto-generated utilities, optional runtime - all powered by your design system. #opensource #webdevelopment #ui #ux #dx

We're live on ProductHunt! 🚀 Styleframe is out in the wild, and if you have a moment today, we'd love your support and feedback. 🔗 www.producthunt.com/products/sty... #producthunt #webdevelopment #ui #ux #dx