https://teapaw.org/t.co/CBMCCAI6Td - the Design Systems Engine for serious TypeScript applications. Enjoy type-checked tokens, themes, utilities, recipes and selectors.
styleframe.config.ts
Joined June 2025
- Tweets45
- Following50
- Followers6
- Likes34
Styleframe retweeted
Big win! I’ve improved the performance of UXFront’s particle art renderer on the homepage.
Honestly can’t believe how smooth it is! 🤯
uxfront.com
Styleframe retweeted
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/gett…
Styleframe retweeted
Buttons are the most common interactive component. So the Button is Open Component's first component.
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/comp…
Styleframe retweeted
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, stay under your control, and are type-checked.
• Tailwind: bg-pirmary -> Why is my button still gray!?
• Styleframe: _background:pirmary -> Error: Variable "color.pirmary" is not defined
Port your TailwindCSS codebase to Styleframe, step by step 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-dev/st…
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
styleframe.dev/docs/getting-…
Styleframe retweeted
For years I've wanted to write truly high-quality UI components, and have everyone get them. Not just React or Vue devs. Everyone.
The problem is that the same components have to be rewritten for every framework, and each rewrite is a chance to compromise.
So I'm building a compiler. 🧵
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
Should we tree-shake recipes next? 🚀
Shipped another huge DX win for @styleframe_dev! Utility classes are now minified automatically at build time.
_color:primary -> _c:p
Write utility classes in natural CSS-like syntax during development. Ship smaller HTML and CSS than Tailwind (-15% gzipped), zero loss of DX.
We've just released [email protected]! 🎉
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
ALT Styleframe - v3.7.0 Release
Our documentation now features a select menu to choose from @reactjs, @vuejs and vanilla @typescript 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.md guide to help you get started: github.com/styleframe-dev/st…
#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.
Styleframe retweeted
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 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