Skip to content

Commit 75cbba5

Browse files
ariflogsariflogs
committed
blog list page ✅
1 parent bb9d652 commit 75cbba5

File tree

7 files changed

+193
-4
lines changed

7 files changed

+193
-4
lines changed

‎app/(marketing)/blogs/layout.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Metadata } from "next";
2+
3+
export const metadata: Metadata = {
4+
title: "RetroUI Blogs",
5+
};
6+
7+
export default function BlogsLayout({
8+
children,
9+
}: Readonly<{
10+
children: React.ReactNode;
11+
}>) {
12+
return <div className="max-w-6xl mx-auto pt-12">{children}</div>;
13+
}

‎app/(marketing)/blogs/page.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { allBlogs } from "@/.contentlayer/generated";
2+
import { Card, Text } from "@/packages/ui";
3+
import Image from "next/image";
4+
import Link from "next/link";
5+
import React from "react";
6+
7+
function page() {
8+
const blogs = allBlogs.filter((blog) => blog.status === "published");
9+
10+
return (
11+
<div>
12+
<Text as="h2" className="mb-12 text-center ">
13+
All RetroUI Blogs
14+
</Text>
15+
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">
16+
{blogs.map((blog) => (
17+
<Link href={`${blog.url}`}>
18+
<Card key={blog._id}>
19+
<Card.Header>
20+
<Image
21+
src={blog.coverImage}
22+
alt={blog.title}
23+
width={600}
24+
height={400}
25+
className="mb-6"
26+
/>
27+
<Card.Title>{blog.title}</Card.Title>
28+
<Card.Description>{blog.description}</Card.Description>
29+
</Card.Header>
30+
</Card>
31+
</Link>
32+
))}
33+
</div>
34+
</div>
35+
);
36+
}
37+
38+
export default page;

‎app/layout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export default function RootLayout({
4747
<body
4848
className={`${shareTech.className} ${archivoBlack.variable} ${shareTech.variable} ${shareTechMono.variable}`}
4949
>
50-
<div className="relative z-40 mb-16">
50+
<div className="relative z-40 pb-16">
5151
<TopNav />
5252
</div>
5353
{children}

‎content/blogs/top-5-react-ui-library.mdx

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
---
2+
title: Top 5 React UI Libraries in 2025
3+
coverImage: /images/blogs/top-5-react-ui-library/cover.png
4+
description: Using UI libraries can significantly speed up your development process and help you create consistent, high-quality user interfaces.
5+
tags:
6+
- react
7+
- ui library
8+
- top 5
9+
author:
10+
name: Arif Hossain
11+
avatar: https://avatars.githubusercontent.com/u/43506814
12+
status: published
13+
publishedAt: 12 Feb, 2024
14+
---
15+
16+
**Top 5 React UI Libraries in 2025: Building Stunning User Interfaces Made Easy**
17+
18+
As the web development landscape continues to evolve, React remains one of the most popular JavaScript libraries for building dynamic and responsive user interfaces. With the rise of component-based architecture, React UI libraries have become indispensable tools for developers, enabling them to create beautiful, functional, and accessible applications with minimal effort.
19+
20+
In 2025, the competition among React UI libraries has intensified, with new features, better performance, and enhanced customization options. Whether you're building a simple dashboard, a complex enterprise application, or a sleek e-commerce platform, these top 5 React UI libraries are your go-to solutions.
21+
22+
---
23+
24+
### **1. Material-UI (MUI)**
25+
26+
Material-UI has been a dominant player in the React ecosystem for years, and in 2025, it continues to lead the pack. Built on Google's Material Design principles, MUI offers a comprehensive suite of pre-built components that are both aesthetically pleasing and highly functional.
27+
28+
**Why MUI in 2025?**
29+
30+
- **Enhanced Theming:** MUI's theming capabilities have reached new heights, allowing developers to create custom designs effortlessly.
31+
- **Performance Optimizations:** With faster rendering and reduced bundle sizes, MUI ensures your applications run smoothly.
32+
- **Accessibility:** MUI remains committed to accessibility, ensuring that all components are WCAG-compliant.
33+
- **Community Support:** With a massive community and extensive documentation, MUI is a reliable choice for developers of all skill levels.
34+
35+
**Use Case:** Perfect for developers who want a polished, modern look with minimal customization.
36+
37+
---
38+
39+
### **2. Chakra UI**
40+
41+
Chakra UI has gained immense popularity for its simplicity and flexibility. In 2025, it remains a top choice for developers who prioritize accessibility and ease of use.
42+
43+
**Why Chakra UI in 2025?**
44+
45+
- **Modular Design:** Chakra UI's modular approach allows developers to pick and choose only the components they need.
46+
- **Dark Mode Support:** Built-in dark mode support makes it a favorite for modern applications.
47+
- **Accessibility First:** Chakra UI is designed with accessibility in mind, ensuring that all components are screen-reader friendly.
48+
- **Customization:** Its style props system makes it incredibly easy to customize components without writing additional CSS.
49+
50+
**Use Case:** Ideal for developers who want a lightweight, accessible, and highly customizable library.
51+
52+
---
53+
54+
### **3. Ant Design**
55+
56+
Ant Design has been a favorite among enterprise-level developers, and in 2025, it continues to shine with its robust and feature-rich components.
57+
58+
**Why Ant Design in 2025?**
59+
60+
- **Enterprise-Ready:** Ant Design is tailored for complex applications, offering advanced components like tables, forms, and charts.
61+
- **Internationalization:** Built-in support for multiple languages makes it a great choice for global applications.
62+
- **Consistency:** Ant Design's design system ensures consistency across all components.
63+
- **Community and Ecosystem:** With a thriving community and a wealth of third-party plugins, Ant Design is a reliable choice for large-scale projects.
64+
65+
**Use Case:** Best suited for enterprise applications and developers who need a comprehensive set of components.
66+
67+
---
68+
69+
### **4. Tailwind UI with Headless UI**
70+
71+
While Tailwind CSS has revolutionized the way developers write CSS, its integration with React through Headless UI has made it a powerhouse in 2025. Tailwind UI offers a utility-first approach, giving developers complete control over their designs.
72+
73+
**Why Tailwind UI in 2025?**
74+
75+
- **Utility-First Approach:** Tailwind's utility classes allow for rapid prototyping and highly customizable designs.
76+
- **Headless UI:** Headless UI provides unstyled, fully accessible components that can be styled using Tailwind CSS.
77+
- **Performance:** Tailwind's purging mechanism ensures that only the used CSS is included in the final bundle.
78+
- **Community Growth:** The Tailwind community has grown exponentially, offering a wealth of resources and templates.
79+
80+
**Use Case:** Perfect for developers who want full control over their design system and prefer a utility-first approach.
81+
82+
---
83+
84+
### **5. Mantine**
85+
86+
Mantine has emerged as a strong contender in the React UI library space, offering a modern and developer-friendly experience. In 2025, it has solidified its position as a top choice for building responsive and accessible applications.
87+
88+
**Why Mantine in 2025?**
89+
90+
- **Rich Component Library:** Mantine offers a wide range of components, from basic buttons to complex data tables.
91+
- **Hooks-Based:** Mantine's hooks-based architecture makes it easy to integrate with existing React projects.
92+
- **Theming:** Its theming system is highly flexible, allowing developers to create unique designs effortlessly.
93+
- **Focus on DX:** Mantine prioritizes developer experience with excellent documentation and TypeScript support.
94+
95+
**Use Case:** Great for developers who want a modern, hooks-based library with a rich set of components.
96+
97+
---
98+
99+
### **Conclusion**
100+
101+
In 2025, the React ecosystem is more vibrant than ever, with UI libraries catering to a wide range of needs. Whether you're looking for a polished design system like Material-UI, a utility-first approach with Tailwind UI, or an enterprise-ready solution like Ant Design, there's a React UI library for every project.
102+
103+
When choosing a library, consider factors like customization, performance, accessibility, and community support. Each of these top 5 libraries has its strengths, so pick the one that aligns best with your project requirements and development style.
104+
105+
Happy coding, and here's to building stunning user interfaces in 2025 and beyond! 🚀
106+
107+
---
108+
109+
_Which React UI library is your favorite? Let us know in the comments below!_

‎contentlayer.config.ts

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,35 @@ export const Doc = defineDocumentType(() => ({
4444
},
4545
}));
4646

47+
const Author = defineNestedType(() => ({
48+
name: "Author",
49+
fields: {
50+
name: { type: "string", required: true },
51+
avatar: { type: "string", required: true },
52+
},
53+
}));
54+
55+
export const Blog = defineDocumentType(() => ({
56+
name: "Blog",
57+
filePathPattern: `blogs/**/*.mdx`,
58+
contentType: "mdx",
59+
fields: {
60+
title: { type: "string", required: true },
61+
description: { type: "string", required: true },
62+
coverImage: { type: "string", required: true },
63+
publishedAt: { type: "date" },
64+
author: { type: "nested", required: true, of: Author },
65+
tags: { type: "list", required: true, of: { type: "string" } },
66+
status: { type: "enum", options: ["draft", "published"], default: "draft" },
67+
},
68+
computedFields: {
69+
url: {
70+
type: "string",
71+
resolve: (doc) => `/${doc._raw.flattenedPath}`,
72+
},
73+
},
74+
}));
75+
4776
export default makeSource({
4877
mdx: {
4978
remarkPlugins: [],
@@ -139,7 +168,7 @@ export default makeSource({
139168
],
140169
},
141170
contentDirPath: "./content",
142-
documentTypes: [Doc],
171+
documentTypes: [Doc, Blog],
143172
});
144173

145174
const getNodeAttributeByName = (node: UnistNode, name: string) => {

‎packages/ui/Text/Text.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ const textVariants = cva("font-head", {
77
as: {
88
p: "font-sans text-base",
99
h1: "text-5xl lg:text-6xl font-bold",
10-
h2: "text-3xl lg:text-5xl font-semibold",
11-
h3: "text-2xl lg:text-3xl font-medium",
10+
h2: "text-3xl lg:text-4xl font-semibold",
11+
h3: "text-2xl font-medium",
1212
h4: "text-xl font-medium",
1313
h5: "text-lg font-medium",
1414
h6: "",

‎public/images/blogs/top-5-react-ui-library/cover.png

27.9 KB
Loading

0 commit comments

Comments
 (0)