Alex Grozav

opencomponents.devMCP ServerConnect your agents to the standard, so they can read the contracts, every rule and the docs a section at a time as they build and review components.

16h

I’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. I’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. I'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 🧵

View full thread

It isn't a component library, so there's nothing to install. It's a set of rules you can hold your own components to, whichever library or framework you use.

opencomponents.devOpen Components - The standard for perfect UI componentsGuidelines for building UI components with a perfect user experience, developer experience and agentic experience, whether humans or AI agents write them.

I'd love your feedback and contributions. Tell me what you think of the rules, what I've missed, and which component you'd like to see next. Thanks for reading! Site: opencomponents.dev Button: opencomponents.dev/docs/compone... GitHub: github.com/uxfront-com/...

Each component gets a single page that walks through all four and ends with a checklist of rules to follow. Every rule has an ID like button/keep-focus, a level and a way to check it, so you or your agents can cite it in a code review.

Every page is also published as markdown, and the contract comes as a YAML file with every rule in about an eighth of the page's length. Each component also has a reference implementation that meets every rule, along with its tests.

User Interface: anatomy, variants, colors, sizes, states and tokens. User Experience: accessible, predictable, designed in every state, and adapting to motion, contrast, color scheme and text size preferences.

Developer Experience: one consistent, type-safe API that you learn once and use everywhere. Agentic Experience: prompts, semantic markup, machine-readable contracts and rules that agents can check their work against.

Like most of you, I use a lot of AI in my craft. Most of the time the code is just good enough, but never at the level of quality I strive for, or that I'd reach writing it by hand. That needs to change, for everyone. That's why Open Components was born.

I'm treating components from four directions. - User Interface (UI) - User Experience (UX) - Developer Experience (DX) - Agentic Experience (AX)

I've built this incredible website with Claude, in preparation for the exciting Frontend projects I have lined up under the UXFront brand. uxfront.com I'm still in awe every time I look at it.

I've been a frontend developer for the past 17 years, and I could never dream of investing the time to build something like this for a personal project. Building something this complex would normally take months, maybe even years. With @anthropic.com's Claude, I built this in two weeks.

Alex Grozav reposted

14 July

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

Alex Grozav reposted

github.comReleases · styleframe-dev/styleframeWrite type-safe, composable, future-proof Design Systems code using styleframe's powerful TypeScript CSS API. - styleframe-dev/styleframe

14 June

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

Alex Grozav reposted

Inkline

@inkline.io

9 June

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.

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

I'm building this on top of the TypeScript compiler infrastructure. My .ink.tsx files are TypeScript, so ts.createSourceFile parses them, TypeChecker resolves every symbol, and forEachChild walks the tree. The hardest part of most compilers was already written. I just had to listen to it.

github.comGitHub - inkline/inkline: Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems. - inkline/inkline

The long-term vision: one cross-framework UI Library, shipping two incremental versions: • headless components of highest standards • styled components, incredibly configurable and performant via @styleframe.dev Inkline is open source and under active development. github.com/inkline/inkl...

This is my non-negotiable: every output must be idiomatic. Real React with useState. Real Vue with ref. Real Svelte with $state. Context provision. Two-way binding. Prop typing. Not wrappers. Not compatibility layers. Code that looks like a human wrote it by hand, in that framework.

Every framework is an answer to the same question: how should a UI respond to change? Authoring components using a compiled framework means I don't have to pick a winner. The UI Library I'm writing learns to speak each one fluently, so that a great component can be a great component everywhere.

My dream is to write a component once, at the highest quality I can, and ship it natively to @react.dev, @vuejs.org, @svelte.dev, @solidjs.com, @angular.dev, @qwik.dev, and @astro.build. The real challenges are reactivity and reliability.

React re-renders. Vue tracks through proxies. Solid compiles fine-grained subscriptions. Svelte tracks signals from $state runes. The same result on screen, but completely different models underneath. A compiler that treats these as "syntax differences" produces code that works but feels wrong.

Alex Grozav reposted

31 May

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

21 May

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.

21 May

I built the same pages using utility classes in both @styleframe.dev and @tailwindcss.com. Styleframe resulted in smaller bundles, and in my opinion a cleaner authoring experience. If you want to run it yourself: github.com/styleframe-d...

styleframe.devType-safe Composable CSSFrom simple UI styles to full Design Systems, write code using Styleframe’s powerful TypeScript CSS API — AI-ready by design.

21 May

This is just one feature of @styleframe.dev - the type-safe styling engine with theming, recipes, and hundreds of building blocks to create your design system. It's completely free, open source, and production-ready today. Website: styleframe.dev Star on GitHub: github.com/styleframe-d...

16 May

I've just shipped a huge DX win for styleframe! Recipes now auto-generate named Props types from their variants. Component props stay in sync with your design system, zero manual typing. #webdev #typescript #opensource

Styleframe@styleframe.dev

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

Alex Grozav reposted

14 May

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

Alex Grozav reposted

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

9 May

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

Alex Grozav reposted

9 Apr

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

bit.lyButtonAn interactive control component for actions and navigation. Supports multiple colors, visual styles, sizes, and states through the recipe system.

24 Mar

It’s finally happening 🚀 Styleframe is shaping up to be the layer powering @inkline.io's theming engine - fully type-safe, endlessly customizable, composable styling. Exciting times ahead 👀

Styleframe@styleframe.dev

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

Alex Grozav reposted

20 Mar

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

Alex Grozav reposted

github.comRelease v.3.0.0 · styleframe-dev/styleframeWhat's Changed refactor: Introduce global styleframe instance by @alexgrozav in #114 feat: Integrate scanner algorithm by @alexgrozav in #115 feat(theme): add Badge recipe with createUseRecipe fac...

24 Feb

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

Alex Grozav reposted

github.comRelease v2.6.0 · styleframe-dev/styleframeWhat's Changed feat: add license dependency and update runtime init by @alexgrozav in #102 feat: Add Figma plugin for Styleframe variables import/export by @alexgrozav in #83 refactor: Reorganize ...

1 Feb

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

Alex Grozav reposted

styleframe.devFigma Plugin - Design Tokens SyncStyleframe is the source of truth for your design tokens. Sync variables between code and Figma using the W3C DTCG format, with full multi-mode support.

30 Jan

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

Alex Grozav reposted

daniel r(ooooooh) at jsconf mx 🇲🇽

@danielroe.dev

14 Jan

wrote some things I've been thinking about ai ... and it ended up feeling very personal roe.dev/blog/the-go...

roe.devThe golden threadAI can serve us as a force multiplier, augmenting our own agency and making the most of our own effort, hard work and value. Not by replacing it.

Alex Grozav reposted

styleframe.devUtilities OverviewExplore Styleframe's utility composables for generating CSS utility classes. Create flexible, reusable styling primitives with full type safety.

15 Jan

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

Alex Grozav reposted

3 Jan

🎉 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

Alex Grozav reposted

28 Nov 2025

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

Alex Grozav reposted

producthunt.comStyleframe: Type-safe, Composable CSS and Design Systems in TypeScript | Product HuntType-safe, composable CSS - from simple UI styles to full Design Systems, write code using Styleframe’s powerful TypeScript CSS API - AI-ready by design.

24 Nov 2025

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

24 Nov 2025

Okay... this made my day. Thank you all for trying @styleframe.dev! 💛

Styleframe@styleframe.dev

Absolutely blown away. 🤯 Thank you to everyone who checked out styleframe in the last 48 hours. 💛