<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: XiaoMoDern</title>
    <description>The latest articles on DEV Community by XiaoMoDern (@xiaomodern).</description>
    <link>https://dev.to/xiaomodern</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4054059%2Fc5caa00f-7cad-44f5-85fe-dbc8fe7a8261.jpg</url>
      <title>DEV Community: XiaoMoDern</title>
      <link>https://dev.to/xiaomodern</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/xiaomodern"/>
    <language>en</language>
    <item>
      <title>What AI Anxiety Sounds Like in Chinese Developer Communities</title>
      <dc:creator>XiaoMoDern</dc:creator>
      <pubDate>Mon, 10 Aug 2026 08:00:10 +0000</pubDate>
      <link>https://dev.to/xiaomodern/what-ai-anxiety-sounds-like-in-chinese-developer-communities-1f88</link>
      <guid>https://dev.to/xiaomodern/what-ai-anxiety-sounds-like-in-chinese-developer-communities-1f88</guid>
      <description>&lt;h2&gt;
  
  
  The fear sounds different here
&lt;/h2&gt;

&lt;p&gt;My last post — the one about AI not killing my motivation — did something I didn't expect. A few hundred people read it in a week. A handful of people commented. A lot of you followed.&lt;/p&gt;

&lt;p&gt;I was genuinely surprised. Reading through the responses, I noticed something I had not expected: &lt;strong&gt;the fear sounds different here from the English-language developer discussions I read every day.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In many English-language discussions, AI anxiety is framed as an existential question:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;em&gt;"Will AI make my skills worthless?"&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;"Am I still a 'real developer' if AI writes most of my code?"&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;"What's the point of mastering a craft that a model can replicate in seconds?"&lt;/em&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In the Chinese communities I read and take part in — Juejin comments, V2EX threads, and WeChat developer groups — the emphasis is often somewhere else:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;em&gt;"If everyone uses AI, the ones who don't will fall behind."&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;"My company just hired two juniors who code with Cursor. I've been here five years. What's my edge now?"&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;"I'm 33. AI is one thing. The 35-year-old cliff is the real one."&lt;/em&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The difference is not absolute, but it is noticeable.&lt;/p&gt;

&lt;p&gt;One conversation often asks: &lt;strong&gt;"Will AI replace me?"&lt;/strong&gt;&lt;br&gt;
The other often asks: &lt;strong&gt;"Will AI help someone else replace me?"&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Those questions overlap, but they lead to different practical concerns.&lt;/p&gt;

&lt;h2&gt;
  
  
  Fear #1: Not "will AI replace me" — "will AI arm someone else to replace me"
&lt;/h2&gt;

&lt;p&gt;China's developer market was intensely competitive long before AI arrived. Terms such as "996" — 9 AM to 9 PM, six days a week — are part of the career conversation, whether people are describing job postings, past experience, or the pressure they expect from the market.&lt;/p&gt;

&lt;p&gt;In that environment, the question is often less &lt;em&gt;"will a tool replace me?"&lt;/em&gt; than &lt;em&gt;"who becomes more competitive once this tool is widely available?"&lt;/em&gt; AI changes what a team can expect from each person.&lt;/p&gt;

&lt;p&gt;That does not mean a junior suddenly becomes a senior. Context, review judgment, and ownership still matter. But AI can shorten the distance between an idea and a plausible implementation, so the baseline for routine work can move faster than people expect.&lt;/p&gt;

&lt;p&gt;That is why, in the communities I follow, AI anxiety often appears as tool FOMO rather than a debate about craft: &lt;em&gt;"Which model are you using?" "Have you tried Tongyi Lingma?" "Is Cursor worth paying for?"&lt;/em&gt; The conversation is usually tactical. In a competitive market, refusing to try a useful tool can feel less like a principle and more like a risk.&lt;/p&gt;

&lt;p&gt;The recurring tension is simple: someone may want to keep their skills sharp, while also worrying that a team already using AI will move faster. That is the part of AI anxiety I hear most often here.&lt;/p&gt;

&lt;p&gt;A few weeks back, I saw a thread where a developer asked: &lt;em&gt;"My whole team started using AI tools. I refused — I wanted to keep my skills sharp. Now I'm the slowest one. Am I wrong?"&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;The top reply: &lt;em&gt;"You're not wrong. You're just going to be unemployed and right."&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;That, in one sentence, is the Chinese developer AI anxiety in a nutshell.&lt;/p&gt;

&lt;h2&gt;
  
  
  Fear #2: The 35-year-old cliff is scarier than AI
&lt;/h2&gt;

&lt;p&gt;If you're a Chinese developer over 30, you already know this term: &lt;strong&gt;the 35-year-old cliff (35岁危机)&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;It refers to a widely discussed concern that age can narrow opportunities in parts of the technology job market. The reality varies by company, role, city, and individual situation, but the concern is familiar enough that it shapes career decisions well before someone reaches 35.&lt;/p&gt;

&lt;p&gt;AI did not create this fear. I heard versions of it from more experienced developers when I was a junior, and it still comes up whenever people talk about layoffs, career changes, or whether to keep specializing.&lt;/p&gt;

&lt;p&gt;What AI changes is the feeling of how quickly the market can move.&lt;/p&gt;

&lt;p&gt;If AI helps a less experienced developer complete more routine work, it can make the usual questions about experience, cost, and speed feel more immediate. That does not prove that AI creates an age cliff, but it can make an existing anxiety sharper.&lt;/p&gt;

&lt;p&gt;That is why I see people say versions of: &lt;em&gt;"I'm more worried about turning 33 than about GPT-5."&lt;/em&gt; They are not necessarily dismissing AI. They are ranking it alongside the pressures that already affect their jobs.&lt;/p&gt;

&lt;p&gt;In conversations I have had, layoffs are usually discussed in terms of budgets, business changes, and cost. AI becomes part of that discussion because it may change what a smaller or cheaper team can deliver.&lt;/p&gt;

&lt;h2&gt;
  
  
  Fear #3: The "am I still a real developer" question is less common here
&lt;/h2&gt;

&lt;p&gt;Here's a question you see constantly in English-language AI discourse: &lt;em&gt;"If AI writes my code, am I still a real developer?"&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;I have read this framing many times. I see it much less often in the Chinese communities I follow.&lt;/p&gt;

&lt;p&gt;Why? I think it comes down to how developer identity gets built in each context.&lt;/p&gt;

&lt;p&gt;In some English-language open source and indie-hacking circles, the craft of writing code is closely tied to developer identity: typing the solution, understanding every line, and being able to recreate the stack from scratch. AI can feel disruptive because it puts a layer between the developer and the code.&lt;/p&gt;

&lt;p&gt;In the Chinese teams and communities I know, the balance often tilts more toward outcomes: shipping the product, meeting the deadline, and getting through the release. If a tool helps a team move faster, people are usually willing to try it. That does not make the code less important; it changes what gets emphasized in day-to-day work.&lt;/p&gt;

&lt;p&gt;Neither orientation is better. They simply put the pressure in different places. The equivalent concern I hear more often is: &lt;em&gt;"If AI removes my speed advantage, what is my edge now?"&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Fear #4: The tool reality is different here too
&lt;/h2&gt;

&lt;p&gt;One assumption that does not travel well is that GitHub Copilot is the default tool for every Chinese developer. In the communities I know, it is not.&lt;/p&gt;

&lt;p&gt;Network access and payment can add friction to some international tools. Developers I know use domestic alternatives — &lt;strong&gt;Tongyi Lingma&lt;/strong&gt; (Alibaba's AI coding assistant), &lt;strong&gt;CodeGeeX&lt;/strong&gt; (from Zhipu AI), or chat interfaces such as DeepSeek, Qwen, and GLM — alongside international tools. The stack often looks different from the "Cursor + Copilot + Claude" setup treated as a default in some English-language discussions.&lt;/p&gt;

&lt;p&gt;This matters because the day-to-day AI experience can be less integrated than some product demos suggest. A multi-tool workflow — code completion in one place, chat-based debugging in another, then copying a revised function back into the codebase — has different costs and risks from an AI-native IDE workflow.&lt;/p&gt;

&lt;p&gt;The gap between what a model can do in a demo and what it can do reliably in a real workflow still matters. That gap shapes both productivity and anxiety.&lt;/p&gt;

&lt;h2&gt;
  
  
  Fear #5: Work that resists neat automation
&lt;/h2&gt;

&lt;p&gt;Many developer jobs sit outside big tech: small and medium companies, outsourcing teams, and traditional industries going through digital transformation. In China, this is often discussed as part of the &lt;strong&gt;sinking market (下沉市场)&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;These jobs often look nothing like the clean "AI is replacing us" narrative. The codebase may be old, requirements may change in conversation, and important business rules may exist only in the head of the one senior dev who's been there since 2015 and never documented anything. The system can be several applications connected by manual work and a shared spreadsheet.&lt;/p&gt;

&lt;p&gt;Current AI tools do not remove the work of sitting in meetings, clarifying what a client means, and turning incomplete business context into a workable specification. That work is not only about writing code. It is about translating a moving, sometimes contradictory business situation into decisions a team can implement.&lt;/p&gt;

&lt;p&gt;That complexity can limit what automation changes in the short term. It does not make those jobs safe, and it does not make the work less skilled. It means AI adoption looks different when the bottleneck is unclear ownership, incomplete requirements, or business context rather than typing speed. In other words: the automation can't even figure out what the job is. That's a different kind of moat.&lt;/p&gt;

&lt;h2&gt;
  
  
  So what are Chinese developers actually afraid of?
&lt;/h2&gt;

&lt;p&gt;Not AI alone, and not always in the "will a model replace me" framing common in some English-language discussions.&lt;/p&gt;

&lt;p&gt;The concerns I hear most often are &lt;strong&gt;speed&lt;/strong&gt; — how quickly AI can narrow an existing advantage — &lt;strong&gt;age&lt;/strong&gt;, and &lt;strong&gt;refusing to adapt&lt;/strong&gt;. In a competitive market, standing still rarely feels neutral.&lt;/p&gt;

&lt;p&gt;If you're a developer reading this from outside China and feeling the same existential dread about AI, here's what I'd offer from inside the Chinese dev bubble:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Ask a more concrete question.&lt;/strong&gt; Instead of only asking &lt;em&gt;"will AI replace me?"&lt;/em&gt;, ask: &lt;em&gt;"Where could AI make someone else faster than me, and where would it not?"&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Rank your threats honestly.&lt;/strong&gt; AI might be far down your list. Ageism, burnout, refusing to learn — those might be closer.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Pick a tool and actually use it for a week.&lt;/strong&gt; Not to replace yourself. To see the gap between what AI &lt;em&gt;can&lt;/em&gt; do and what it &lt;em&gt;does&lt;/em&gt; do in your real workflow. The gap is where you live.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Invest in work that still needs judgment.&lt;/strong&gt; Business context, communication, and the ability to leave a confusing meeting with a usable specification remain valuable, whether or not AI makes implementation faster.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The Chinese developer communities I know are not less concerned about AI. The concern is often shaped by a different labor market, different tools, and different day-to-day constraints. And the monster we're actually afraid of? It's usually the one that shows up.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;I'm a frontend developer based in China, writing &lt;a href="https://technical-blog-ashen.vercel.app" rel="noopener noreferrer"&gt;Dual-Track Dev&lt;/a&gt; — a blog about Chinese developer tools and trends for a global audience. If you're navigating the same AI anxiety from wherever you are, drop a comment. I read every one.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>career</category>
      <category>frontend</category>
    </item>
    <item>
      <title>AI Won't Kill Your AI Won't Kill Your Motivation. But Mediocrity Might.</title>
      <dc:creator>XiaoMoDern</dc:creator>
      <pubDate>Sat, 08 Aug 2026 03:49:34 +0000</pubDate>
      <link>https://dev.to/xiaomodern/ai-wont-kill-your-ai-wont-kill-your-motivation-but-mediocrity-might-3f7o</link>
      <guid>https://dev.to/xiaomodern/ai-wont-kill-your-ai-wont-kill-your-motivation-but-mediocrity-might-3f7o</guid>
      <description>&lt;p&gt;My last post did something I didn't expect.&lt;/p&gt;

&lt;p&gt;I wrote about AI killing my motivation, thinking it might get a few quiet nods from people feeling the same way. Instead, around 180 people read it in a day, some of you followed, and the comments turned into a much better conversation than I expected.&lt;/p&gt;

&lt;p&gt;I'm still not entirely sure why. Maybe it hit a nerve. Maybe the timing was right and a lot of people were already sitting with the same discomfort. Could be both. I don't know.&lt;/p&gt;

&lt;p&gt;A lot of people came back to the same question: are we still pilots, or are we becoming passengers while the autopilot does the flying?&lt;/p&gt;

&lt;p&gt;There was one part of that conversation I didn't really address in the first post. Or maybe I was avoiding it. I'm still not sure which.&lt;/p&gt;

&lt;p&gt;For many developers, the uncomfortable feeling is not just about what AI can do. It is about what AI makes harder to hide.&lt;/p&gt;

&lt;p&gt;Before tools like ChatGPT and Copilot, it was possible to spend a long time getting by on familiar patterns. Learn React. Learn a framework. Build dashboards. Wire up forms, state, tables, APIs, and permissions.&lt;/p&gt;

&lt;p&gt;That work matters. Products need it. But a lot of it is repetitive.&lt;/p&gt;

&lt;p&gt;For a long time, being quick at repetitive work could still feel like being highly skilled. There was enough work around, and the difference between "competent" and "exceptional" was not always obvious.&lt;/p&gt;

&lt;p&gt;AI changed that. Or it's changing that — I can't tell how fast, honestly.&lt;/p&gt;

&lt;p&gt;It can now produce a first pass at the boilerplate, CRUD screens, common component patterns, and code you have written many times before. Not perfectly, but quickly enough that the old advantage starts to feel less valuable.&lt;/p&gt;

&lt;p&gt;That part stings. I think that's the core of it.&lt;/p&gt;

&lt;p&gt;That can be unsettling, especially if most of your growth has happened inside that category of work. Maybe "unsettling" is too soft. For some people I've talked to, it's been closer to devastating. And I get it.&lt;/p&gt;

&lt;p&gt;I do not think that means people are useless or deserve to be replaced. At least I hope it doesn't. That would be a pretty bleak way to look at an entire profession.&lt;/p&gt;

&lt;p&gt;I think it means many of us, myself included, discovered that parts of our skill set were narrower than we wanted to admit.&lt;/p&gt;

&lt;p&gt;We confused speed with depth. I know I did. I still catch myself doing it.&lt;/p&gt;

&lt;p&gt;The developers who seemed least shaken by AI were not necessarily the best at typing code. They were the ones already spending time on harder problems: understanding messy business rules, challenging vague requirements, making trade-offs, debugging production failures, and deciding what not to build.&lt;/p&gt;

&lt;p&gt;I've met a few of these developers. They're not always the loudest in the room. Sometimes they're the quietest. They ask one question in a planning meeting and suddenly everyone realizes they've been solving the wrong problem for two days. That kind of thing.&lt;/p&gt;

&lt;p&gt;When Copilot arrived, they did not see their whole job disappearing. They saw a way to spend less time on the predictable parts of it.&lt;/p&gt;

&lt;p&gt;Tanay made a good point in the comments on the last post. He described AI as an autopilot. It can handle a lot when conditions are stable, but you still need someone who understands the route, recognizes bad weather, and knows what to do when the plan stops working.&lt;/p&gt;

&lt;p&gt;That analogy stuck with me. I've turned it over a few times since.&lt;/p&gt;

&lt;p&gt;The uncomfortable part is this: if you have only trained for clear weather, AI makes that obvious very quickly.&lt;/p&gt;

&lt;p&gt;It did for me. Still does, if I'm being honest.&lt;/p&gt;

&lt;p&gt;I sat with that for a while. So what do we actually do about it?&lt;/p&gt;

&lt;p&gt;The distinction I keep coming back to is not "AI writes code and humans make decisions." That is too simple. AI can help with decisions too. It can surface options, explain trade-offs, and point out risks I missed. Actually, maybe I'm the one overcomplicating this. Let me try again.&lt;/p&gt;

&lt;p&gt;Here's what I keep noticing: give AI a clearly defined problem and it can usually produce a useful starting point. Ask it whether the problem is worth solving, whether your team is accepting the wrong constraint, or whether a shortcut will become painful six months from now, and the answer depends on context it does not truly own.&lt;/p&gt;

&lt;p&gt;It does not sit in the meeting when a stakeholder changes the goal halfway through the conversation. It does not carry the consequences when a technical decision creates maintenance work for the rest of the team. It does not know which compromise is acceptable for your product, your users, or your company.&lt;/p&gt;

&lt;p&gt;That responsibility is still ours. For now, at least. I don't know what happens in five years, and anyone who tells you they do is guessing.&lt;/p&gt;

&lt;p&gt;The developers I see doing well are not simply writing less code. They are getting better at framing problems before code exists.&lt;/p&gt;

&lt;p&gt;They read more code. They ask better questions in planning. They clarify requirements that sound obvious but are not. They learn enough about the business to recognize when a technically clean solution solves the wrong problem.&lt;/p&gt;

&lt;p&gt;That is not glamorous work. A good decision in a meeting does not show up as a polished screenshot or an impressive GitHub diff.&lt;/p&gt;

&lt;p&gt;But it changes what gets built. I think. I'm still figuring out how to measure that.&lt;/p&gt;

&lt;p&gt;I am still figuring this out myself. Some days I worry that I am not learning fast enough. Other days I look at what I shipped last month and realize that, without AI, it would have taken a much larger chunk of my time.&lt;/p&gt;

&lt;p&gt;Maybe that's the whole thing right there. Not getting faster at the old work. Getting better at the new work that the old work was taking time away from.&lt;/p&gt;

&lt;p&gt;The goal is not to compete with AI at the tasks it was designed to accelerate.&lt;/p&gt;

&lt;p&gt;The goal is to use that time to become better at the parts of the job that need judgment: understanding people, understanding systems, spotting bad assumptions, and taking responsibility for the outcome.&lt;/p&gt;

&lt;p&gt;AI did not kill my motivation.&lt;/p&gt;

&lt;p&gt;It made me look more honestly at where my motivation came from, what I was actually good at, and what I still need to learn.&lt;/p&gt;

&lt;p&gt;That part is uncomfortable. But it is also useful. At least I keep telling myself that.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;I'm a frontend developer based in China, building &lt;a href="https://technical-blog-ashen.vercel.app" rel="noopener noreferrer"&gt;Dual-Track Dev&lt;/a&gt; — a blog about Chinese developer tools and trends for a global audience. If you're navigating the same AI anxiety, reach out or drop a comment. I'd love to hear how you're handling it.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>career</category>
      <category>frontend</category>
      <category>webdev</category>
    </item>
    <item>
      <title>AI Didn't Kill My Motivation — Here's How I Use It as a Frontend Productivity Weapon</title>
      <dc:creator>XiaoMoDern</dc:creator>
      <pubDate>Thu, 06 Aug 2026 09:35:02 +0000</pubDate>
      <link>https://dev.to/xiaomodern/ai-didnt-kill-my-motivation-heres-how-i-use-it-as-a-frontend-productivity-weapon-4dkm</link>
      <guid>https://dev.to/xiaomodern/ai-didnt-kill-my-motivation-heres-how-i-use-it-as-a-frontend-productivity-weapon-4dkm</guid>
      <description>&lt;h2&gt;
  
  
  The anxiety is real — and it's everywhere
&lt;/h2&gt;

&lt;p&gt;Open any Chinese developer community right now — Juejin, Major, or WeChat groups — and you'll see the same posts dominating the timeline:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;em&gt;"AI is already writing better code than I can. What's the point of practicing anymore?"&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;"I've lost all motivation to learn. AI knows everything I know, and more."&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;"Frontend development is a dead-end career. Start pivoting now."&lt;/em&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These posts routinely get hundreds of comments. The sentiment is unmistakable: a generation of developers who feel like they're watching their own obsolescence in real time.&lt;/p&gt;

&lt;p&gt;I know because I was one of them.&lt;/p&gt;

&lt;p&gt;Three months ago, I was staring at a Cursor-generated component that was cleaner than anything I'd written all week. The sinking feeling hit hard — &lt;em&gt;what am I even doing here?&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;But then something shifted. And it wasn't because I ignored the AI wave. It was because I started &lt;em&gt;using&lt;/em&gt; it.&lt;/p&gt;

&lt;h2&gt;
  
  
  The mental reframe: AI is not your replacement — it's your force multiplier
&lt;/h2&gt;

&lt;p&gt;Here's the thing nobody tells you when you're deep in the anxiety spiral: &lt;strong&gt;AI is the best thing that has ever happened to a curious developer.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Yes, it can solve the LeetCode problem you're stuck on. Yes, it can generate a pixel-perfect landing page from a screenshot. But here's what it &lt;em&gt;can't&lt;/em&gt; do:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Understand your team's business logic from a one-line Slack message&lt;/li&gt;
&lt;li&gt;Decide that the shiny new framework will actually be a maintenance nightmare six months in&lt;/li&gt;
&lt;li&gt;Push back on a bad product decision because you've seen this pattern fail before&lt;/li&gt;
&lt;li&gt;Build trust with stakeholders who need a human to say &lt;em&gt;"I'll own this"&lt;/em&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Those things? That's the actual job. The code was always the easiest part.&lt;/p&gt;

&lt;p&gt;Once that clicked, my motivation didn't die — it &lt;em&gt;redirected&lt;/em&gt;. Instead of proving I could write every line myself, I started asking: &lt;em&gt;what's the highest-leverage thing I can do right now that AI can't?&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  My actual daily workflow (tools and real scenarios)
&lt;/h2&gt;

&lt;p&gt;I'm a frontend developer working on a side project — an English-language tech blog that covers Chinese developer tools and trends. Here's how AI fits into my week.&lt;/p&gt;

&lt;h3&gt;
  
  
  UI prototyping: v0 / bolt.new
&lt;/h3&gt;

&lt;p&gt;When I need to go from "rough idea" to "something I can click through," I use v0 (Vercel's AI UI generator). A typical session:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;Prompt: "Create a blog post page with a dark mode toggle, reading progress bar,
and a sidebar with category tags. Use Tailwind CSS and a clean typography design."
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;15 seconds later, I have a responsive page. But here's the key — I don't copy-paste the whole thing. I cherry-pick the parts I like, refactor them into my existing component structure, and adjust the design tokens to match my system.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Time without AI&lt;/strong&gt;: ~90 minutes of writing layouts, tweaking spacing, debugging responsive breakpoints.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Time with AI&lt;/strong&gt;: ~20 minutes — and most of that is me thinking about what I actually want.&lt;/p&gt;

&lt;h3&gt;
  
  
  Code review and debugging: ChatGPT / Claude
&lt;/h3&gt;

&lt;p&gt;I treat ChatGPT like a senior engineer who's always available for a quick review:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;em&gt;"Here's my Astro component. The build passes but the dark mode flickers on first load. Spot the race condition."&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;"I'm using this Tailwind config. Is there a cleaner way to define these custom spacing tokens?"&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;"Review this TypeScript type definition — am I over-engineering this?"&lt;/em&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In every case, I'm not asking AI to do my job. I'm asking it to &lt;em&gt;accelerate my learning&lt;/em&gt;. The output goes through my judgment, and I only apply what makes sense.&lt;/p&gt;

&lt;h3&gt;
  
  
  Code completion: Tongyi Lingma / Continue
&lt;/h3&gt;

&lt;p&gt;For routine coding — wiring up APIs, writing boilerplate components, filling in TypeScript types — I use AI code completion as my auto-pilot. It handles the predictable 60% so I can focus on the tricky 40%.&lt;/p&gt;

&lt;p&gt;The rule I follow: &lt;strong&gt;if the AI suggestion makes me think instead of just nodding, I type it myself.&lt;/strong&gt; Because that's where the learning happens.&lt;/p&gt;

&lt;h3&gt;
  
  
  Content creation: ChatGPT + DeepL
&lt;/h3&gt;

&lt;p&gt;For my side blog (an English-language site covering Chinese developer tools), I use a translation-refinement pipeline:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Rough translation via DeepL from Chinese source material&lt;/li&gt;
&lt;li&gt;ChatGPT rewrites for natural English technical writing&lt;/li&gt;
&lt;li&gt;I do a final 10-15 minute review — fixing terminology, adding personal insight, and making sure the voice actually sounds like &lt;em&gt;me&lt;/em&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This pipeline turned a 4-hour-per-article process into 45 minutes. I'm not publishing AI-generated slop — I'm publishing my own analysis, just skipping the slowest part of the writing process.&lt;/p&gt;

&lt;h2&gt;
  
  
  The numbers: AI vs no-AI, same project
&lt;/h2&gt;

&lt;p&gt;I tracked roughly how my side project changed before and after integrating AI into the workflow:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Task&lt;/th&gt;
&lt;th&gt;Pre-AI&lt;/th&gt;
&lt;th&gt;Post-AI&lt;/th&gt;
&lt;th&gt;Leverage&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Write and publish one blog post&lt;/td&gt;
&lt;td&gt;3-4 hours&lt;/td&gt;
&lt;td&gt;45-60 minutes&lt;/td&gt;
&lt;td&gt;~4x&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Build a new page from scratch&lt;/td&gt;
&lt;td&gt;90 minutes&lt;/td&gt;
&lt;td&gt;20 minutes&lt;/td&gt;
&lt;td&gt;~4.5x&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Debug a tricky layout issue&lt;/td&gt;
&lt;td&gt;30-60 minutes&lt;/td&gt;
&lt;td&gt;5-15 minutes&lt;/td&gt;
&lt;td&gt;~4x&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Review own code for bugs&lt;/td&gt;
&lt;td&gt;15 minutes&lt;/td&gt;
&lt;td&gt;2 minutes (AI flag, then verify)&lt;/td&gt;
&lt;td&gt;~7x&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Weekly total (side project)&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;6-8 hours&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;2-3 hours&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;~3x&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;I'm shipping more, learning faster, and — critically — &lt;em&gt;enjoying it more&lt;/em&gt;. Because I'm spending less time in CSS grid debugging hell and more time actually thinking about what I want to build.&lt;/p&gt;

&lt;h2&gt;
  
  
  The real threat isn't AI — it's refusing to adapt
&lt;/h2&gt;

&lt;p&gt;Here's my honest take, three months into this experiment:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;AI won't kill your motivation. It will kill the motivation of developers who measure their worth by how many lines of code they wrote today.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;If your identity as a developer is "I can type React components faster than anyone," then yes — AI is a threat to you. But that was never the valuable part of the job.&lt;/p&gt;

&lt;p&gt;The valuable parts:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Understanding the problem before writing a single line&lt;/li&gt;
&lt;li&gt;Knowing &lt;em&gt;which&lt;/em&gt; tool or approach to use, and &lt;em&gt;why&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;Communicating trade-offs to non-technical stakeholders&lt;/li&gt;
&lt;li&gt;Building things people actually want to use&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;AI doesn't touch any of that. It makes the easy parts faster so you can spend more time on the hard parts that actually matter.&lt;/p&gt;

&lt;h2&gt;
  
  
  So what now?
&lt;/h2&gt;

&lt;p&gt;If you're feeling the same anxiety I felt, here's what worked for me:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Stop doom-scrolling AI replacement threads&lt;/strong&gt; on Twitter/Reddit. They're dopamine traps, not information sources.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Pick one AI tool and actually use it for a week.&lt;/strong&gt; Not to replace yourself — to see what it can and can't do. The gap is where you live.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Shift your metric of success.&lt;/strong&gt; Stop counting lines of code. Start counting problems solved, decisions made, things shipped.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Invest in what AI can't do&lt;/strong&gt;: business understanding, system design judgment, communication, taste.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;AI is a tool. A really, really good tool. And tools don't replace craftsmen — they make them more dangerous.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;I'm a frontend developer based in China, building &lt;a href="https://technical-blog-ashen.vercel.app" rel="noopener noreferrer"&gt;Dual-Track Dev&lt;/a&gt; — a blog about Chinese developer tools and trends for a global audience. If you're navigating the same AI anxiety, reach out or drop a comment. I'd love to hear how you're handling it.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>frontend</category>
      <category>productivity</category>
      <category>career</category>
    </item>
    <item>
      <title>DeepSeek V4 Is Now the 'Kill Line' of AI Models — Here's What That Means</title>
      <dc:creator>XiaoMoDern</dc:creator>
      <pubDate>Tue, 04 Aug 2026 03:40:05 +0000</pubDate>
      <link>https://dev.to/xiaomodern/deepseek-v4-is-now-the-kill-line-of-ai-models-heres-what-that-means-5bkm</link>
      <guid>https://dev.to/xiaomodern/deepseek-v4-is-now-the-kill-line-of-ai-models-heres-what-that-means-5bkm</guid>
      <description>&lt;p&gt;On the last day of July, DeepSeek finally shipped V4 Flash-0731 — a 284B-parameter model that, according to early benchmarks, outperforms GLM-5.2 and trades blows with Anthropic's Opus 4.8. The Chinese developer community, which had been roasting CEO Liang Wenfeng as "Little Liang" during the delay, immediately restored his honorific: "Saint Liang."&lt;/p&gt;

&lt;p&gt;But the V4 Flash isn't just another model release. It's triggered a concept that's spreading fast through Chinese AI circles: the &lt;strong&gt;kill line&lt;/strong&gt;. And once you understand it, it changes how you think about the entire LLM market.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Is the "Kill Line"?
&lt;/h2&gt;

&lt;p&gt;The term originated from gamers — in RPGs, the kill line is the damage threshold above which you one-shot an enemy. In the AI context, it works like this:&lt;/p&gt;

&lt;p&gt;If your model is both &lt;strong&gt;more expensive AND lower-performing&lt;/strong&gt; than DeepSeek V4 Flash, you are below the kill line. Your model is dead.&lt;/p&gt;

&lt;p&gt;A developer plotted it cleanly using Artificial Analysis data. Take every major model, chart them by price against performance score, and draw a rectangle anchored at DeepSeek V4 Flash's position. Everything in the bottom-right quadrant? Killed.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Performance-Price Matrix
&lt;/h2&gt;

&lt;p&gt;Here's how the battlefield looks after July 31:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Below the kill line&lt;/strong&gt; (worse + more expensive): Most mid-tier models, legacy proprietary APIs. Dead.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Left of the kill line&lt;/strong&gt; (cheaper): GPT-5.6 Luna (just cut price 80%), Xiaomi MiMo-V2.5. Surviving on price alone.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Top-right safe zone&lt;/strong&gt; (better, more expensive): Kimi K3, Opus 5, Opus 4.8, GPT-5.6 Sol — and only in Max/High thinking mode.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The only models that escape either slashed prices by 80% or need to run in their most expensive thinking modes. For a 284B-parameter model to force that response from models with 5x the parameters? Unprecedented.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Makes V4 Flash-0731 Special
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Parameter efficiency that shouldn't work.&lt;/strong&gt; 284B is mid-range. Opus 5 runs at ~1T+. GPT-5.6 Sol is in that ballpark. Yet V4 Flash is within striking distance. If DeepSeek has cracked something fundamental about training efficiency, the implications go far beyond one release.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The pricing is the weapon.&lt;/strong&gt; DeepSeek has always competed on price, but V4 Flash makes it existential. Competitors face three bad options: match the price and lose money, stay premium and watch users migrate, or do nothing and fall below the kill line.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The kill line moves every quarter.&lt;/strong&gt; V4 Flash-0731 revives DeepSeek's date-stamped versioning. Post-training improvements ship on a 2-3 month cadence. Every release raises the floor.&lt;/p&gt;

&lt;h2&gt;
  
  
  What This Means
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;The middle tier is collapsing.&lt;/strong&gt; You're either competing at the absolute top or competing on being cheaper than DeepSeek. No comfortable middle.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Open-source absorbs the kill line.&lt;/strong&gt; DeepSeek's weights are available. The kill line becomes the new floor for the entire open-source ecosystem — every fine-tune, every enterprise deployment, every local setup.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The English-language gap.&lt;/strong&gt; DeepSeek's docs, community, and ecosystem are still heavily Chinese-language. For Western developers, the onboarding friction is real. The kill line exists, but accessing it requires crossing a language barrier most won't bother with.&lt;/p&gt;

&lt;h2&gt;
  
  
  What We Don't Know
&lt;/h2&gt;

&lt;p&gt;V4 Pro is coming within weeks alongside DeepSeek's Harness agent framework, with roughly 5x the parameters of Flash. If Flash is already pushing Opus 4.8 territory, Pro could realistically challenge Opus 5 and GPT-5.6 Sol. The kill line is about to move up again.&lt;/p&gt;

&lt;p&gt;Real-world performance vs benchmarks is still an open question. Leaderboards don't capture long-context reasoning, tool use, or agentic behavior. The real test is production workloads.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Bottom Line
&lt;/h2&gt;

&lt;p&gt;DeepSeek V4 Flash isn't just an impressive model. It's a market-making event. The kill line concept resonates because it captures something true: when a model this capable ships at this price point, it doesn't just compete — it redefines what competition means.&lt;/p&gt;

&lt;p&gt;If you haven't tested DeepSeek V4 yet, you're making decisions based on outdated assumptions. If you're running an AI company, check your position on the chart. If you're in the bottom-right quadrant, you have until the next DeepSeek release.&lt;/p&gt;

&lt;p&gt;The kill line moved on July 31. It's moving again soon.&lt;br&gt;
&lt;a href="https://technical-blog-ashen.vercel.app/blog/deepseek-v4-kill-line/" rel="noopener noreferrer"&gt;https://technical-blog-ashen.vercel.app/blog/deepseek-v4-kill-line/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>deepseek</category>
      <category>ai</category>
      <category>llm</category>
      <category>benchmark</category>
    </item>
    <item>
      <title>LobeChat: The 60K-Star Open-Source ChatGPT Alternative Nobody Talks About (And Why It Matters)</title>
      <dc:creator>XiaoMoDern</dc:creator>
      <pubDate>Mon, 03 Aug 2026 06:37:59 +0000</pubDate>
      <link>https://dev.to/xiaomodern/lobechat-the-60k-star-open-source-chatgpt-alternative-nobody-talks-about-and-why-it-matters-40nl</link>
      <guid>https://dev.to/xiaomodern/lobechat-the-60k-star-open-source-chatgpt-alternative-nobody-talks-about-and-why-it-matters-40nl</guid>
      <description>&lt;p&gt;I found it by accident. A Chinese developer friend mentioned "this chat tool everyone uses in China," and I expected another ChatGPT wrapper. What I found instead was a project with 60,000 GitHub stars that I'd never seen mentioned on Dev.to, Hacker News, or Reddit. Not once.&lt;/p&gt;

&lt;p&gt;That project is LobeChat, and after deploying it and comparing it head-to-head with ChatGPT, LibreChat, and a few others, I think it deserves a real review in English.&lt;/p&gt;

&lt;p&gt;What Is LobeChat?&lt;br&gt;
LobeChat is an open-source chat interface for large language models, built by the LobeHub team in China. Think of it as your own private ChatGPT UI—except you control everything: which models to use, where your data lives, and how the interface behaves.&lt;/p&gt;

&lt;p&gt;Under the hood: Next.js 14 + Ant Design, streamed through Server-Sent Events, packaged into a single Docker container.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Metric&lt;/th&gt;
&lt;th&gt;Value&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;GitHub Stars&lt;/td&gt;
&lt;td&gt;~60,000&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;LLM Providers&lt;/td&gt;
&lt;td&gt;20+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;UI Languages&lt;/td&gt;
&lt;td&gt;15+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Plugins&lt;/td&gt;
&lt;td&gt;50+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Deployment&lt;/td&gt;
&lt;td&gt;Docker / Vercel / Zeabur / SealOS&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;The Core Pitch: Why You'd Want This&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Multi-Provider Support (Not Just OpenAI)
This is the killer feature. LobeChat doesn't tie you to one model. You can configure:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;OpenAI (GPT-4, GPT-4o)&lt;br&gt;
Anthropic (Claude 3.5 Sonnet, Claude Fable)&lt;br&gt;
Google Gemini (Gemini 1.5 Pro)&lt;br&gt;
DeepSeek (R1, V3)&lt;br&gt;
Ollama (Llama, Mistral, Qwen — local models on your own hardware)&lt;br&gt;
Azure, Bedrock, Groq, Perplexity, and 10+ more&lt;br&gt;
And here's the kicker: you can switch models mid-conversation. Compare GPT-4 and Claude on the same prompt in seconds:&lt;/p&gt;

&lt;p&gt;Click provider icon → Select different model → Retry query&lt;br&gt;
No restart. No page reload. Each conversation remembers its provider.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Self-Hosted. Your Data, Your Rules.
docker run -d -p 3210:3210 \
-e OPENAI_API_KEY=sk-xxx \
-e ACCESS_CODE=your-password \
--name lobe-chat \
lobehub/lobe-chat:latest
That's it. Ten minutes from zero to a fully functional ChatGPT alternative running on your infrastructure. If your company has data residency requirements, this is a checkbox ChatGPT can't tick.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;For teams, there's a Docker Compose setup with PostgreSQL for persistent conversation history and multi-user access control.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Plugin System With Real Capabilities
LobeChat uses a manifest-based plugin architecture. Plugins declare their capabilities in a manifest.json and run in sandboxed iframes. The marketplace has ~50 plugins today, covering:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Web search (Google, Bing, SearXNG)&lt;br&gt;
Code interpreter (execute Python, JS, SQL)&lt;br&gt;
Image generation (DALL-E, Stable Diffusion)&lt;br&gt;
Weather, news, calendar integration&lt;br&gt;
MCP (Model Context Protocol) support — one-click install from the MCP marketplace&lt;br&gt;
Writing custom plugins is straightforward: define the manifest, implement your API calls, and the chat UI renders it as an interactive tool. If you've worked with OpenAI function calling, the mental model transfers directly.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;PWA: Install It Like a Native App&lt;br&gt;
LobeChat ships as a Progressive Web App. On mobile, tap "Add to Home Screen" and it behaves like a native chat app—offline support, push notifications, full keyboard shortcuts. The desktop PWA experience is nearly indistinguishable from the ChatGPT desktop app, minus the electron bloat.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Actually Good Design&lt;br&gt;
Open-source tools often look like open-source tools. LobeChat doesn't. The UI is polished, with custom themes (Dark mode is excellent), responsive layouts, and a chat experience that consistently matches or exceeds ChatGPT's own interface.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Built on Ant Design, it inherits a mature design system with consistent component behavior and accessibility. The team clearly has strong design sensibilities—unsurprising, given that the same group maintains Lobe UI, a popular React component library.&lt;/p&gt;

&lt;p&gt;Comparison: LobeChat vs. The Rest&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Feature&lt;/th&gt;
&lt;th&gt;LobeChat&lt;/th&gt;
&lt;th&gt;ChatGPT Web&lt;/th&gt;
&lt;th&gt;LibreChat&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;LLM Providers&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;20+&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;OpenAI only&lt;/td&gt;
&lt;td&gt;10+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Plugins&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;MCP + manifest, 50+&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;1000+ GPTs&lt;/td&gt;
&lt;td&gt;Basic tools&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;PWA Support&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;Full&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;None&lt;/td&gt;
&lt;td&gt;Partial&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Multi-Language&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;15+&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;10&lt;/td&gt;
&lt;td&gt;5&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Self-Hosted&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Built-in RAG&lt;/td&gt;
&lt;td&gt;Via plugin&lt;/td&gt;
&lt;td&gt;In GPTs&lt;/td&gt;
&lt;td&gt;Yes, built-in&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Mobile Experience&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;PWA, native-like&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Responsive&lt;/td&gt;
&lt;td&gt;Responsive&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Theme Customization&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;Full&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;None&lt;/td&gt;
&lt;td&gt;Minimal&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Open Source&lt;/td&gt;
&lt;td&gt;Yes (Apache 2.0)&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;The honest tradeoff: LibreChat has built-in RAG (document upload with vector search). LobeChat handles knowledge base functionality through plugins instead. If uploading PDFs and querying them is your primary use case, LibreChat might be the better fit today. For everything else—UI quality, provider flexibility, plugin ecosystem, mobile experience—LobeChat leads.&lt;/p&gt;

&lt;p&gt;Why Haven't You Heard of It?&lt;br&gt;
This is the most interesting part. LobeChat has 60,000 GitHub stars, an active community, and a polished product. Yet searching for "LobeChat review" in English returns almost nothing.&lt;/p&gt;

&lt;p&gt;The reason is simple: language barrier and community separation.&lt;/p&gt;

&lt;p&gt;LobeChat's documentation, community, and contributors are predominantly Chinese-speaking. The GitHub README exists in both English and Chinese, but discussions happen on Chinese forums. The English-language AI community simply hasn't discovered it yet.&lt;/p&gt;

&lt;p&gt;This pattern repeats. Dify, another Chinese open-source project (LLM application builder), followed the same trajectory—explosive growth in China, near-invisible in English-speaking circles, then a slow burn of international adoption.&lt;/p&gt;

&lt;p&gt;For developers willing to cross the language barrier, this is an information arbitrage opportunity: you get a tool that's battle-tested by a massive user base, while most English-speaking developers are still evaluating half-baked alternatives.&lt;/p&gt;

&lt;p&gt;Limitations: Where LobeChat Falls Short&lt;br&gt;
Honesty time.&lt;/p&gt;

&lt;p&gt;No built-in RAG. You can't upload a PDF and ask questions about it without a plugin. The roadmap mentions native RAG, but today it requires extra setup.&lt;/p&gt;

&lt;p&gt;Young plugin ecosystem. ~50 community plugins vs. ChatGPT's thousands. Building custom plugins requires understanding the manifest schema, though it's well-documented.&lt;/p&gt;

&lt;p&gt;Rate limiting for free API tiers. If you're using a free-tier API key (OpenAI trial credits, etc.), LobeChat itself adds no rate limiting—but your provider will.&lt;/p&gt;

&lt;p&gt;Chinese-leaning defaults. Fresh install defaults to some Chinese-language settings. One-minute fix in Settings → Language, but worth noting.&lt;/p&gt;

&lt;p&gt;Who Should Use LobeChat?&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Use Case&lt;/th&gt;
&lt;th&gt;Recommendation&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Individual developer tired of $20/month ChatGPT&lt;/td&gt;
&lt;td&gt;
&lt;strong&gt;Yes.&lt;/strong&gt; Pay only for API usage.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Small team needing shared AI access&lt;/td&gt;
&lt;td&gt;
&lt;strong&gt;Yes.&lt;/strong&gt; Docker Compose + multi-user mode.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Company with data residency requirements&lt;/td&gt;
&lt;td&gt;
&lt;strong&gt;Yes.&lt;/strong&gt; Self-hosted. Data stays on your servers.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;User who frequently switches between Claude, GPT, Gemini&lt;/td&gt;
&lt;td&gt;
&lt;strong&gt;Yes.&lt;/strong&gt; Provider switching is the core UX.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Someone who primarily does document Q&amp;amp;A with RAG&lt;/td&gt;
&lt;td&gt;
&lt;strong&gt;Maybe.&lt;/strong&gt; Use LibreChat if RAG is your main workflow.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Non-technical user who wants zero setup&lt;/td&gt;
&lt;td&gt;
&lt;strong&gt;No.&lt;/strong&gt; Stick with ChatGPT.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;The Bottom Line&lt;br&gt;
LobeChat is not "ChatGPT but Chinese." It's "what ChatGPT could be if it were open-source, provider-agnostic, and designed for people who control their own infrastructure."&lt;/p&gt;

&lt;p&gt;The 60,000-star GitHub count isn't hype. It reflects a real product solving real problems for a large user base. The only reason it hasn't crossed into the English-speaking dev world is visibility, not quality.&lt;/p&gt;

&lt;p&gt;If you've been looking for a self-hosted AI chat interface that doesn't feel like a downgrade from ChatGPT's UI, deploy LobeChat tonight. It costs nothing but a Docker container and an API key you probably already have.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>opensource</category>
      <category>chatgpt</category>
      <category>china</category>
    </item>
    <item>
      <title>WeChat Mini Programs: The App Store Inside a Messaging App (and Why the West Has Nothing Like It)</title>
      <dc:creator>XiaoMoDern</dc:creator>
      <pubDate>Fri, 31 Jul 2026 02:26:18 +0000</pubDate>
      <link>https://dev.to/xiaomodern/wechat-mini-programs-the-app-store-inside-a-messaging-app-and-why-the-west-has-nothing-like-it-3kc1</link>
      <guid>https://dev.to/xiaomodern/wechat-mini-programs-the-app-store-inside-a-messaging-app-and-why-the-west-has-nothing-like-it-3kc1</guid>
      <description>&lt;p&gt;If you've never used WeChat, this will sound absurd: inside a messaging app, you can file your taxes, book a doctor's appointment, order groceries, play AAA-quality games, apply for a visa, and pay for street food — all without installing a single additional app.&lt;/p&gt;

&lt;p&gt;These are WeChat Mini Programs, and they handle over &lt;strong&gt;900 million monthly active users&lt;/strong&gt;. Yet most Western developers and product managers barely know they exist.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Is a Mini Program, Exactly?
&lt;/h2&gt;

&lt;p&gt;A Mini Program is a sub-application that runs inside WeChat. Think of it as a lightweight app that doesn't need to be downloaded from an app store. Users open it by scanning a QR code, tapping a link in a chat, or searching within WeChat itself.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;/th&gt;
&lt;th&gt;Native App&lt;/th&gt;
&lt;th&gt;WeChat Mini Program&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Installation&lt;/td&gt;
&lt;td&gt;App Store / Google Play&lt;/td&gt;
&lt;td&gt;None — opens instantly&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Size limit&lt;/td&gt;
&lt;td&gt;No limit (typically 50-300MB)&lt;/td&gt;
&lt;td&gt;20MB (2MB for the initial package)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Payment&lt;/td&gt;
&lt;td&gt;Apple/Google 30% cut&lt;/td&gt;
&lt;td&gt;WeChat Pay, 0.6% fee&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;User acquisition&lt;/td&gt;
&lt;td&gt;ASO, ads, word of mouth&lt;/td&gt;
&lt;td&gt;QR codes, group sharing, official accounts&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Development&lt;/td&gt;
&lt;td&gt;Native (Swift/Kotlin) or cross-platform&lt;/td&gt;
&lt;td&gt;WeChat's proprietary framework (WXML + WXSS + JS)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Discovery&lt;/td&gt;
&lt;td&gt;App Store search&lt;/td&gt;
&lt;td&gt;Search within WeChat, location-based discovery&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;The 20MB size limit is intentional. It forces Mini Programs to be focused, fast, and single-purpose. Users scan a QR code, the app loads in 2-3 seconds, and they complete their task in under a minute.&lt;/p&gt;

&lt;h2&gt;
  
  
  How Big Is This, Really?
&lt;/h2&gt;

&lt;p&gt;Tencent publishes figures annually. As of their latest report:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Metric&lt;/th&gt;
&lt;th&gt;Number&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Monthly active Mini Program users&lt;/td&gt;
&lt;td&gt;900M+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Daily active Mini Programs&lt;/td&gt;
&lt;td&gt;3M+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Total Mini Programs created&lt;/td&gt;
&lt;td&gt;4.5M+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Annual transaction volume&lt;/td&gt;
&lt;td&gt;¥10 trillion+ (~$1.4T USD)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Industries covered&lt;/td&gt;
&lt;td&gt;200+ categories&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;To put that transaction volume in perspective: the entire global app store economy (Apple App Store + Google Play) did roughly $170 billion in 2024. WeChat Mini Programs processed over &lt;strong&gt;8 times that&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Can't WhatsApp or iMessage Do This?
&lt;/h2&gt;

&lt;p&gt;Three structural reasons:&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Payments Aren't Built-In (in the West)
&lt;/h3&gt;

&lt;p&gt;WeChat Pay is embedded at the OS level of WeChat. Tapping a Mini Program's "pay" button completes the transaction inside the app — no redirect to Stripe, no Apple Pay sheet, no credit card form. The payment infrastructure is woven into the chat app itself.&lt;/p&gt;

&lt;p&gt;In the West, WhatsApp Pay exists in India and Brazil, but nowhere near the scale of WeChat Pay. Apple's iMessage has Apple Pay, but it's a transfer mechanism, not a commerce platform. The payment layer is what turns a chat app into a marketplace.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. QR Codes Are Infrastructure, Not an Afterthought
&lt;/h3&gt;

&lt;p&gt;In China, QR codes are everywhere — restaurant menus, street vendor carts, bus stops, hospital registration desks. Each code opens a specific Mini Program. This transforms physical-world touchpoints into digital entry points.&lt;/p&gt;

&lt;p&gt;Western platforms have never treated QR codes as first-class infrastructure. Apple only added a QR scanner to the iPhone camera in iOS 11 (2017). By then, WeChat had already processed billions of QR code interactions.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Regulation and Lock-In
&lt;/h3&gt;

&lt;p&gt;China's mobile ecosystem is dominated by a handful of super apps. Regulatory choices made Mini Programs a natural solution. Why fight app store approval when you can launch inside WeChat in 24 hours?&lt;/p&gt;

&lt;p&gt;The West's anti-trust environment and Apple's walled garden make a WeChat-like ecosystem politically and technically near-impossible.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Actually Runs on Mini Programs?
&lt;/h2&gt;

&lt;p&gt;Not just games and shopping. Here's a sample of what Chinese users do without leaving WeChat:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Category&lt;/th&gt;
&lt;th&gt;Examples&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Government services&lt;/td&gt;
&lt;td&gt;Tax filing, social security, visa applications, marriage registration&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Healthcare&lt;/td&gt;
&lt;td&gt;Hospital appointments, prescription refills, health codes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Transportation&lt;/td&gt;
&lt;td&gt;Metro card top-up, bike sharing, train/flight booking&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Food&lt;/td&gt;
&lt;td&gt;Restaurant ordering, delivery, table QR code menus&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Finance&lt;/td&gt;
&lt;td&gt;Bank account opening, insurance claims, stock trading&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Education&lt;/td&gt;
&lt;td&gt;Homework submission, parent-teacher communication, online courses&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Retail&lt;/td&gt;
&lt;td&gt;Nike, Uniqlo, IKEA — all have Mini Programs that mirror their apps&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;The Chinese government actively pushes Mini Programs for public services. During COVID, the health code system — which every citizen needed to enter any building — was a Mini Program. That alone onboarded hundreds of millions of users who had never used an app before.&lt;/p&gt;

&lt;h2&gt;
  
  
  What This Means for Businesses Outside China
&lt;/h2&gt;

&lt;p&gt;If you're a brand entering the Chinese market, you don't need to build an iOS app, an Android app, and maintain both. A single WeChat Mini Program covers both platforms, handles payments natively, and leverages WeChat's built-in sharing mechanics for organic growth.&lt;/p&gt;

&lt;p&gt;Luxury brands figured this out early. Louis Vuitton, Gucci, and Burberry all run Mini Programs that handle product browsing, appointment booking, and direct purchase — without directing users to a separate app or website.&lt;/p&gt;

&lt;p&gt;For SaaS companies: the Mini Program model is worth studying even if you can't replicate it. The core insight is that &lt;strong&gt;users don't want more apps — they want less friction&lt;/strong&gt;. A 20MB sub-app that opens in 2 seconds and already has the user's payment info beats a 200MB download and a 5-step checkout.&lt;/p&gt;

&lt;h2&gt;
  
  
  Will the West Ever Get Something Like This?
&lt;/h2&gt;

&lt;p&gt;Short answer: not in the current regulatory and platform environment.&lt;/p&gt;

&lt;p&gt;Long answer: there are partial approximations. Telegram's bots handle payments and mini web apps. Discord's app directory lets bots integrate deeply. Apple's App Clips let you use a small part of an app without installing it. But none of them combine payment, identity, social sharing, and offline-to-online bridging the way WeChat does.&lt;/p&gt;

&lt;p&gt;The super app model requires a willingness to let one company control payments, identity, distribution, and discovery — and neither Silicon Valley nor Brussels seems comfortable with that.&lt;/p&gt;

&lt;h2&gt;
  
  
  Key Takeaways
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;WeChat Mini Programs are not "apps within an app" — they're an alternative app economy with 900M+ users and $1.4T in annual transactions&lt;/li&gt;
&lt;li&gt;The combination of built-in payments, QR code infrastructure, and regulatory alignment makes them uniquely Chinese&lt;/li&gt;
&lt;li&gt;Western platforms lack the payment and identity layer necessary for a similar ecosystem&lt;/li&gt;
&lt;li&gt;For foreign businesses, a Mini Program is often more effective than a native app for reaching Chinese consumers&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The Mini Program isn't a feature — it's a platform strategy that redefined what a messaging app can be.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Originally published at &lt;a href="https://technical-blog-ashen.vercel.app/blog/wechat-mini-programs-explained" rel="noopener noreferrer"&gt;Technical Blog&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>wechat</category>
      <category>china</category>
      <category>mobile</category>
      <category>atprotocol</category>
    </item>
    <item>
      <title>Getting Started with Ant Design — Build Your First React UI in 15 Minutes</title>
      <dc:creator>XiaoMoDern</dc:creator>
      <pubDate>Thu, 30 Jul 2026 09:34:33 +0000</pubDate>
      <link>https://dev.to/xiaomodern/getting-started-with-ant-design-build-your-first-react-ui-in-15-minutes-5f00</link>
      <guid>https://dev.to/xiaomodern/getting-started-with-ant-design-build-your-first-react-ui-in-15-minutes-5f00</guid>
      <description>&lt;h2&gt;
  
  
  What Is Ant Design?
&lt;/h2&gt;

&lt;p&gt;Ant Design (antd) is a React UI library built by Alibaba's Ant Group. It's the most starred React component library on GitHub from China, with over 90k stars — yet surprisingly undercovered in the English-speaking developer community.&lt;/p&gt;

&lt;p&gt;If you've used Material UI or Chakra UI, Ant Design is the Chinese equivalent, but with its own design philosophy: consistent, predictable, and packed with enterprise-grade components out of the box.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Fun fact: Alibaba, Tencent, Baidu, and most Chinese tech companies use Ant Design in production. It powers dashboards that serve hundreds of millions of users.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Why Ant Design Over MUI?
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Feature&lt;/th&gt;
&lt;th&gt;Ant Design&lt;/th&gt;
&lt;th&gt;Material UI&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Components&lt;/td&gt;
&lt;td&gt;60+&lt;/td&gt;
&lt;td&gt;50+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Table (Pro)&lt;/td&gt;
&lt;td&gt;Built-in sorting, filtering, pagination, row selection&lt;/td&gt;
&lt;td&gt;Requires manual wiring&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Form validation&lt;/td&gt;
&lt;td&gt;Declarative, built-in&lt;/td&gt;
&lt;td&gt;Requires react-hook-form or Formik&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Tree-shaking&lt;/td&gt;
&lt;td&gt;Supported (v5)&lt;/td&gt;
&lt;td&gt;Supported&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Bundle size (min)&lt;/td&gt;
&lt;td&gt;~200KB gzipped&lt;/td&gt;
&lt;td&gt;~140KB gzipped&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Documentation&lt;/td&gt;
&lt;td&gt;Chinese-first, English translations available&lt;/td&gt;
&lt;td&gt;English-first&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Design system&lt;/td&gt;
&lt;td&gt;Ant Design System (custom)&lt;/td&gt;
&lt;td&gt;Material Design (Google)&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Ant Design wins on &lt;strong&gt;out-of-the-box productivity&lt;/strong&gt; — especially for data-heavy apps like admin panels and dashboards. MUI wins on bundle size and first-party English docs.&lt;/p&gt;

&lt;h2&gt;
  
  
  Installation
&lt;/h2&gt;

&lt;p&gt;npm install antd @ant-design/icons&lt;/p&gt;

&lt;p&gt;No peer dependencies beyond React 16+.&lt;/p&gt;

&lt;h2&gt;
  
  
  Your First Ant Design Component
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Button&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Space&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;antd&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;SearchOutlined&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;DownloadOutlined&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;@ant-design/icons&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;App&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Space&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Button&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"primary"&lt;/span&gt; &lt;span class="na"&gt;icon&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;SearchOutlined&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
        Search
      &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;Button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Button&lt;/span&gt; &lt;span class="na"&gt;icon&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;DownloadOutlined&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Download&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;Button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Button&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"dashed"&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Dashed&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;Button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Button&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"link"&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Link&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;Button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;Space&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That's it. Five button variants with zero CSS.&lt;/p&gt;

&lt;p&gt;Building a Data Table in 5 Minutes&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;useMemo&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Table&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Input&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;antd&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;key&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;1&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John Doe&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;role&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Frontend&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;team&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Web&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;key&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;2&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Jane Smith&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;role&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Backend&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;team&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;API&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;key&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;3&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Li Wei&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;role&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;DevOps&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;team&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Infra&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;key&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;4&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Sarah Chen&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;role&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Frontend&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;team&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Mobile&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;];&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;columns&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Name&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;dataIndex&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;sorter&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;localeCompare&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Role&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;dataIndex&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;role&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;filters&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
      &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;text&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Frontend&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Frontend&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
      &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;text&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Backend&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Backend&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
      &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;text&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;DevOps&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;DevOps&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="p"&gt;],&lt;/span&gt;
    &lt;span class="na"&gt;onFilter&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;record&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;record&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;role&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Team&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;dataIndex&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;team&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;];&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;searchStyle&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;240&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;marginBottom&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;16&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;pageConfig&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;pageSize&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;TeamTable&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;search&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setSearch&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;""&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;filtered&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useMemo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;toLowerCase&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nf"&gt;includes&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;search&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;toLowerCase&lt;/span&gt;&lt;span class="p"&gt;())),&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;search&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Input&lt;/span&gt;
        &lt;span class="na"&gt;placeholder&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"Search by name..."&lt;/span&gt;
        &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;search&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
        &lt;span class="na"&gt;onChange&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setSearch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
        &lt;span class="na"&gt;style&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;searchStyle&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
      &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Table&lt;/span&gt; &lt;span class="na"&gt;columns&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;columns&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="na"&gt;dataSource&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;filtered&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="na"&gt;pagination&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;pageConfig&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This gives you column sorting, filtering, client-side search, and pagination — in under 50 lines.&lt;/p&gt;

&lt;p&gt;Forms That Actually Make Sense&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Form&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Input&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Button&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Select&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;message&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;antd&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;formStyle&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;maxWidth&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;400&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;SignupForm&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;form&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Form&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;useForm&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;onFinish&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;values&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Form values:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;values&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;success&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Signup successful!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;};&lt;/span&gt;
  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Form&lt;/span&gt; &lt;span class="na"&gt;form&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;form&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="na"&gt;layout&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"vertical"&lt;/span&gt; &lt;span class="na"&gt;onFinish&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;onFinish&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="na"&gt;style&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;formStyle&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Form&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Item&lt;/span&gt; &lt;span class="na"&gt;label&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"Email"&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"email"&lt;/span&gt; &lt;span class="na"&gt;rules&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;
          &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;required&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Please enter your email&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
          &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;email&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Invalid email format&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
        &lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Input&lt;/span&gt; &lt;span class="na"&gt;placeholder&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"you@example.com"&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;Form&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Item&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Form&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Item&lt;/span&gt; &lt;span class="na"&gt;label&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"Password"&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"password"&lt;/span&gt; &lt;span class="na"&gt;rules&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;
          &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;required&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Please enter a password&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
          &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;min&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;8&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Must be at least 8 characters&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
        &lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Input&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Password&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;Form&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Item&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Form&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Item&lt;/span&gt; &lt;span class="na"&gt;label&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"Role"&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"role"&lt;/span&gt; &lt;span class="na"&gt;rules&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;[{&lt;/span&gt; &lt;span class="na"&gt;required&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Please select a role&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;}]&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Select&lt;/span&gt; &lt;span class="na"&gt;options&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;
          &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;dev&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;label&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Developer&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
          &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;designer&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;label&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Designer&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
          &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;pm&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;label&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Product Manager&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
        &lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;Form&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Item&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Form&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Item&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Button&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"primary"&lt;/span&gt; &lt;span class="na"&gt;htmlType&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"submit"&lt;/span&gt; &lt;span class="na"&gt;block&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Create Account&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;Button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;Form&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Item&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;Form&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Key advantages: rules array handles all validation declaratively, error messages appear automatically, no useState for form state.&lt;/p&gt;

&lt;p&gt;Theming in 3 Lines&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;ConfigProvider&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;theme&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;antd&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;customTheme&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;algorithm&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;theme&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;darkAlgorithm&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;token&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;colorPrimary&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;#00b96b&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;borderRadius&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;ThemedApp&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;ConfigProvider&lt;/span&gt; &lt;span class="na"&gt;theme&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;customTheme&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;App&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;ConfigProvider&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The entire antd component tree inherits the theme. No CSS overrides needed.&lt;/p&gt;

&lt;p&gt;When to Use Ant Design&lt;br&gt;
Use Ant Design when...  Skip it when...&lt;br&gt;
Building admin panels / dashboards  Building a marketing landing page&lt;br&gt;
Need tables, forms, data entry out of the box   Need a lightweight blog or docs site&lt;br&gt;
You value productivity over bundle size Every KB counts&lt;br&gt;
Ant Design might be China's best-kept secret in the React ecosystem. Now you know.&lt;/p&gt;

&lt;p&gt;Originally published at Technical Blog(&lt;a href="https://technical-blog-ashen.vercel.app/blog/getting-started-with-ant-design" rel="noopener noreferrer"&gt;https://technical-blog-ashen.vercel.app/blog/getting-started-with-ant-design&lt;/a&gt;)&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>frontend</category>
      <category>tutorial</category>
      <category>antd</category>
    </item>
  </channel>
</rss>
