mitosis
tailwind-figma
Our great sponsors
mitosis | tailwind-figma | |
---|---|---|
29 | 13 | |
10,657 | 63 | |
1.9% | - | |
9.0 | 0.0 | |
6 days ago | about 2 years ago | |
TypeScript | ||
MIT License | Creative Commons Zero v1.0 Universal |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
mitosis
-
Nx - Highlights of 2023
Builder.io Mitosis -
-
Introducing Visual Copilot: A Better Figma-to-Code Workflow
The heart of Visual Copilot lies in its AI models and a specialized compiler. The initial model, trained with over 2 million data points, transforms flat design structures into code hierarchies. Our open-source compiler, Mitosis, takes this structured hierarchy and compiles it into code. In the final pass, a finely tuned Large Language Model (LLM) refines the code to match your specific framework and styling preferences. This multi-stage process ensures that the generated code is high-quality and tailored to meet the requirements of your project.
-
[AskJS] Asking advice on monorepo setup with multiple frameworks
Depending on your needs, check out Mitosis that let you write components and compile them to svelte, angular, react. https://github.com/BuilderIO/mitosis
-
Best front-end stack for Golang backend
I discovered https://github.com/BuilderIO/mitosis, and it has changed my front-end development workflow with the ability to create one development and export and test metrics on multiple front-ends delivering the best MVP possible.
-
Creating a component library and as both Svelte and Web components
Or, another alternative is Mitosis which compiles your components to the native version for each framework (you can even compile them to Web Components!). I haven’t personally used this, but it does seem to fit your use case.
-
Build fullstack resumable web app using Qwikcity and github rest api
Mitosis
- Build framework-agnostic components with Mitosis
-
A first look at Bun: is it really 3x faster than Node.js and Deno?
I created a dashboard app in Mitosis (source). It has a full tree of components, business logic, dependencies, uses props and state and other typical React features.
-
Frontend Links
View on GitHub
-
A Quick Guide to Mitosis: Why You Need It and How You Can Use It
You might be thinking, "What’s the big deal? It’s all just JavaScript anyway." Sure, you’re right, but the real challenge here is when each of these teams need to coexist within a single brand that has a very specific design system. This is where Builder.io's Mitosis can help you create a single source of truth for all of the reusable components within your Design System.
tailwind-figma
-
Show dev: Flowbite Svelte - Open-source UI component library
Check out the main GitHub repository to explore other libraries too as well as the Figma design system.
-
State of Flowbite: learn more about our results from 2022 and what we plan to build this year
Of course, this meant that we had to "up our game" with the pro version's design system and we have provided updates all the way up to v2.4.1 and we are super close to launching v2.5.0 with countless new components, landing pages, Figma features, and more.
-
Learn how to install SolidJS with Flowbite and Tailwind CSS
What is Flowbite? svg>
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
Check out this guide to learn how to get started and start developing websites even faster with components on top of Tailwind CSS.p>
Is there a Figma file available? svg>
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
Check out the Figma design system based on the utility classes from Tailwind CSS and components from Flowbite.p>
What are the differences between Flowbite and Tailwind UI? svg>
The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.
Learn more about these technologies:
- Flowbite Proli>
- Tailwind UIli>
-
Show: Open-source admin dashboard with Tailwind CSS and Flowbite
This admin dashboard contains many advanced components both from Flowbite but also from other third-party libraries such as ApexCharts which have been customly tailored with Tailwind CSS classes and designed based on the Flowbite Design System.
-
Introduction to Flowbite / Community rules
🎨 Flowbite Figma: https://flowbite.com/figma/ - Design system built for Figma
-
Show dev: Figma design kit built for Tailwind CSS
Get access to the full version of Tailwind Figma which includes 27 hand-crafted pages, responsive screen examples for mobile, tablet, and desktop devices, advanced UI elements using Figma variants, auto-layouts, style guideline, and many more.
I have also posted it on Github under the CC license (open-source).
What are some alternatives?
flowbite - Open-source UI component library and front-end development framework based on Tailwind CSS
boring-avatars - Boring avatars is a tiny JavaScript React library that generates custom, SVG-based avatars from any username and color palette.
partytown - Relocate resource intensive third-party scripts off of the main thread and into a web worker. 🎉
html-figma - Builder.io for Figma: AI generation, export to code, import from web
angular-email-editor - Drag-n-Drop Email Editor Component for Angular
awesome-tailwindcss - 😎 Awesome things related to Tailwind CSS
css.gg - 700+ Pure CSS, SVG, PNG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API and 6000 glyphs
stencil - A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
qwik - Instant-loading web apps, without effort
jsx-sfc - A SFC like React function component API for managing CSS-in-JS and static members.
shopify-theme-inspector - A Chrome DevTools plugin that visualizes Shopify Liquid render profiling data so you can triage long-running code and reduce server response times!
phinger-cursors - Most likely the most over engineered cursor theme.