Awesome Neobrutalism

Overview:

The content provided is a collection of resources related to Neobrutalism UI, including examples in production, video tutorials, Figma UI Kits, components libraries, articles, and design analysis. It offers real-world examples of Neobrutalism UI in production, tutorials on using Figma for Neobrutalism UI design, UI kits and icon sets for Figma, components libraries for popular frameworks like Astro, React, Tailwind, and Flutter, as well as articles and design breakdowns about the Neobrutalism UI trend.

Features:

• Examples in Production: Real-world examples of Neobrutalism UI design in production, including websites and applications such as Bite Sized Design, CC Creative, Fig Challenge, Gandi.net, Gumroad, and more.
• Video Tutorials: Video tutorials that cover various aspects of designing with Neobrutalism UI, including Figma tutorials and design trend analysis.
• Figma UI Kit: A collection of UI kits and icon sets for Figma, designed specifically for Neobrutalism UI, created by different designers such as Muhamad Digdaya, Viipin Designer, Alex Martynov, and Lea Mendes.
• Components Libraries: Libraries of components and themes for different frameworks like Astro, React, Tailwind, and Flutter, designed with Neobrutalism UI in mind.
• Articles and Design Analysis: A compilation of articles and design breakdowns that explore the Neobrutalism UI trend, its characteristics, and its impact on web design.

Installation:

Here are the installation steps for the different resources:

• For the Neobrutalism UI Figma UI Kit:

  1. Open Figma and create a new project.
  2. In the Figma UI Kit file, click on the desired UI kit or icon set.
  3. Click on the “Duplicate to your drafts” button to create a copy in your Figma drafts.
  4. Open the duplicated file in your drafts and start using the UI kit or icon set in your designs.

• For the Components Libraries:

  • For Astro:
    • Install Astro framework.
    • Use the command to add the Brutal theme to your Astro project: npm install @astro-themes/brutal.
  • For React:
    • Install React framework.
    • Use the command to add the Fractal design system to your React project: npm install @fractal/react.
    • Import the components from the Fractal library and start using them in your React components.
  • For Tailwind:
    • Install Tailwind CSS framework.
    • Use the command to add the Neo-brutalism UI Library to your Tailwind project: npm install tailwindcss-neo-brutalism.
    • Configure Tailwind to include the Neo-brutalism theme in your project.
  • For Flutter:
    • Install Flutter framework.
    • Use the command to add the Neubrutalism UI library to your Flutter project: flutter pub add neubrutalism_ui.
    • Import the Neubrutalism UI components and start using them in your Flutter app.

Summary:

The provided content offers a rich collection of resources for designers interested in Neobrutalism UI. It includes real-world examples, video tutorials, Figma UI kits, components libraries, and articles that provide insights and analyses of the Neobrutalism UI trend. Whether you are looking for inspiration, tutorials, or ready-to-use design assets, this content provides a comprehensive guide to Neobrutalism UI.