diff --git a/rules/do-you-use-the-best-web-ui-libraries/bootstrap.png b/rules/do-you-use-the-best-web-ui-libraries/bootstrap.png deleted file mode 100644 index 9ee99a3fea8..00000000000 Binary files a/rules/do-you-use-the-best-web-ui-libraries/bootstrap.png and /dev/null differ diff --git a/rules/do-you-use-the-best-web-ui-libraries/rule.md b/rules/do-you-use-the-best-web-ui-libraries/rule.md index 38c879847a6..0b5d47bd813 100644 --- a/rules/do-you-use-the-best-web-ui-libraries/rule.md +++ b/rules/do-you-use-the-best-web-ui-libraries/rule.md @@ -1,4 +1,5 @@ --- +seoDescription: Discover the best Web UI libraries for your projects. Learn about shadcn/ui for React and Bootstrap for general use, and explore other useful frameworks to enhance your web applications. type: rule archivedreason: title: Do you use the best Web UI libraries? @@ -13,30 +14,77 @@ authors: - title: Daniel Šmon url: https://ssw.com.au/people/daniel-smon img: https://github.com/SSWConsulting/SSW.People.Profiles/raw/main/Daniel-Smon/Images/Daniel-Smon-Profile.jpg +- title: Isaac Lombard + url: https://ssw.com.au/people/isaac-lombard related: [] redirects: [] --- -Don't waste time evaluating which Web UI libraries to use. Most of the commonly used libraries are very similar in functionality. The recommended library is [Bootstrap](https://getbootstrap.com/). +Don't waste time evaluating which Web UI (Component) libraries to use. If you're already using React, we recommend going with [shadcn/ui](https://shadcn.dev/) – as it's the most extensible and strikes a balance between flexibility and simplicity. For other environments, or for the easiest experience, go with [Bootstrap](https://getbootstrap.com/). -It's the most popular available framework today, which means more people involved in the project, more tutorials and articles from the community, more real-world examples/websites, more third-party extensions, and better integration with other web development products +### shadcn/ui – customised with V0 (Recommended) -![Figure: Leader among frameworks today, Bootstrap toolkit is recommended to build successful websites](bootstrap.png) +This is the best choice for React ecosystems. Shadcn/ui is more recent, but changed the game. It puts the components totally under your control since the code lives in your repository, and still acts like a seperate library by utilising path aliases. -### The 3 things a developer need to know to get up and running quickly with ASP.NET MVC +* **Hybrid Approach**: Combines the benefits of a traditional UI library with flexibility, letting you customize components without being locked into specific styles or functionality. +* **Modern Design System**: Comes with clean, accessible, and responsive components that follow modern design principles. -`youtube: https://www.youtube.com/embed/z3bIM72-YaU?rel=0` - -### Bootstrap & ASP.NET MVC - Intro / Quickstart +V0 is the premier frontend code generation tool by Vercel, and it's partnered with shadcn/ui to extend the clean, modern shadcn components in a myriad of ways – and integrate these extensions with the shadcn/ui path alias conventions. -`youtube: https://www.youtube.com/embed/bIGiUSMBwoo?rel=0` - -### Other useful frameworks +In effect, these two let you quicky build your own custom component library for any given application. -Now that you saved a lot of UI development time by using Bootstrap, you can play around with other useful frameworks. +### Deep Dive: Front-End Development with shadcn/ui and Next.js -* **[KendoUI](http://www.kendoui.com/)** for enhanced HTML and jQuery controls -* **[SignalR](http://signalr.net/)** for real-time web functionality +Check out this insightful tutorial: +`youtube: https://www.youtube.com/embed/U8LyScigrcA?si=btShpW-NWVCwWKZZ` + +--- + +### Bootstrap + +Bootstrap has been the go-to general-purpose component library for years. + +* **Wide Adoption**: It’s the most popular library, meaning more community support, tutorials, third-party plugins, and better integration. +* **Framework Agnostic**: Works seamlessly with JS, Angular, React, Vue, or even pure HTML/CSS. +* **Optimized Ports**: Specialized ports exist for frameworks like [React Bootstrap](https://react-bootstrap.netlify.app/). + +While Bootstrap is a safe and reliable choice, it does have drawbacks, such as limited customizability and heavy reliance on CSS overrides to achieve bespoke designs. + +[![Star History Chart](https://api.star-history.com/svg?repos=shadcn-ui/ui,mui/material-ui,ant-design/ant-design,mantinedev/mantine,nextui-org/nextui,twbs/bootstrap,react-bootstrap/react-bootstrap&type=Timeline)](https://star-history.com/#shadcn-ui/ui&mui/material-ui&ant-design/ant-design&mantinedev/mantine&nextui-org/nextui&twbs/bootstrap&react-bootstrap/react-bootstrap&Timeline) +**Figure – Bootstrap is the most popular UI library** + +--- + +### If you want to find a better fit + +First consider the import type – some component libraries, such as shadcn/ui, use a "copy and paste" style of code sharing, while others (Bootstrap) have typical import behaviour (hiding implementation details behind their APIs). + +The latter kind are typically easier to use, but harder to extend. + +There's also a divide in terms of maintenance responsibility – if you copy and modify code into your project, you'll have update code to newer versions yourself. + +Alternatively, package imports may be upgraded and maintained by the community, but you have to be conscious of any API changes. + +When evaluating a component library, also keep in mind: + +* **Community Support**: Does it have an active user base, comprehensive documentation, and external resources like tutorials and plugins? +* **Integration**: How well does it work with your current tech stack (e.g., React, Angular, Vue)? +* **Performance**: Does it maintain fast load times and responsiveness, even with complex components? + +### Other Useful Frameworks + +Once you’ve saved time by using a pre-built UI library, explore these additional frameworks to enhance your web app: + +* **[KendoUI](http://www.kendoui.com/)**: Offers advanced HTML and jQuery controls for data grids, charts, and more. +* **[SignalR](http://signalr.net/)**: Provides real-time web functionality, perfect for apps needing live updates (e.g., chat apps, dashboards). +* **[MUI](https://mui.com/)**: A popular React UI framework following Google’s Material Design guidelines. +* **[Ant Design](https://ant.design/)**: A comprehensive React-based UI framework with a strong focus on enterprise applications. +* **[Mantine](https://mantine.dev/)**: A flexible and fully accessible UI library with 100+ customizable components and hooks for React. +* **[Chakra UI](https://chakra-ui.com/)**: A modular and accessible component library for React with a focus on design flexibility. +* **[NextUI](https://nextui.org/)**: A modern React UI library optimized for dark mode by default with customizable components. +* **[PrimeReact](https://primereact.org/)**: A comprehensive collection of components for React, part of the PrimeFaces family. +* **[React Suite](https://rsuitejs.com/)**: A set of React components built for middle and back-office applications. +* **[Magic Design](https://magic.design/)**: A lightweight UI component library designed for React with a focus on simplicity. diff --git a/rules/generate-ui-mockups-with-ai/matrix.gif b/rules/generate-ui-mockups-with-ai/matrix.gif new file mode 100644 index 00000000000..7f67ac2767f Binary files /dev/null and b/rules/generate-ui-mockups-with-ai/matrix.gif differ diff --git a/rules/generate-ui-mockups-with-ai/rule.md b/rules/generate-ui-mockups-with-ai/rule.md index 3426756d371..9f34470cca2 100644 --- a/rules/generate-ui-mockups-with-ai/rule.md +++ b/rules/generate-ui-mockups-with-ai/rule.md @@ -1,4 +1,5 @@ --- +seoDescription: Learn how to generate UI mockups with AI tools to streamline your design process. type: rule title: Do you generate UI mockups with AI? uri: generate-ui-mockups-with-ai @@ -17,6 +18,8 @@ authors: url: https://ssw.com.au/people/william-liebenberg - title: Matt Wicks url: https://ssw.com.au/people/matt-wicks + - title: Louis Roa + url: https://ssw.com.au/people/louis-roa related: - mockups-and-prototypes - storyboards @@ -35,8 +38,8 @@ Traditionally, UI wireframes have been made with tools like Figma, Excalidraw, B -`youtube: https://www.youtube.com/watch?v=r8z0a3bPeuM` -**Video: v0 by Vercel: Create UI Components from Text & Images! (6 min)** +`youtube: https://www.youtube.com/watch?v=cyFVtaLy-bA` +**Video: Build a fullstack app in 7 minutes with v0 (Figma to code)! (7 min)** Here is a longer example of someone using v0.dev to generate a calculator UI and then trying to replicate the same UI by hand: [V0 coded a calculator 30x faster than me (17 min)](https://youtu.be/WFZ-g0w3OW4?si=A-18DvJRd2KXfbNy) @@ -58,7 +61,7 @@ If you're a dev that likes (or is forced) to moonlight as a designer these tools Here is what you can achieve using [v0.dev](https://v0.dev) and a few prompts: -![Figure: A cool user form](v0_user_form.png) +![Figure: A matrix-style blog site](matrix.gif "matrix blog") ::: greybox 🤖 AI prompts excamples: diff --git a/rules/generate-ui-mockups-with-ai/v0_user_form.png b/rules/generate-ui-mockups-with-ai/v0_user_form.png deleted file mode 100644 index f97d52a5c14..00000000000 Binary files a/rules/generate-ui-mockups-with-ai/v0_user_form.png and /dev/null differ