项目概述

Duolingo UI (ShadLingo) 是一套基于最新 shadcn/ui v4 与 Tailwind CSS 深度打造的 Duolingo（多邻国）风格设计系统与全功能组件库。它将多邻国世界级的教育游戏化（Gamification）视觉语言融入成熟的企业级前端底座，完美重构了标志性的 3D 拟物感按钮（Chunky 3D Shadow）、高饱和“猫头鹰绿”（Owl Green）主色调、加粗大写字体与答题选择卡片。所有组件无缝继承了 Radix UI 与 shadcn 的无障碍基建与完全可控源码，提供开箱即用的主题令牌与组件层级样式重载，助力开发者一键打造沉浸生动的互动型应用。

核心特性

🎮 标志性 3D 游戏化视觉：精调 4px 实体底投影（shadow-[0px_4px_0px_0px_...]）、2px 加粗描边与 16px 圆角，点击时呈现下压凹陷反馈，质感生动。
🦉 完整的多邻国色彩语义：精准定义 Owl Green (#58cc02)、Spark Blue、Cardinal Red 等高饱和色彩变量，支持开箱即用的深色（Dark Mode）与浅色模式切换。
🧩 全套 60+ 核心组件全量适配：不仅包含重塑的按钮、对话气泡（Bubble）、测验题卡（Questionnaire）与打卡进度条，更完整覆盖表格、抽屉、选择器等全量 shadcn 基础控件。
⚙️ Tailwind CSS v4 & OKLCH 原生支持：使用现代 OKLCH 色彩空间与 CSS 自定义属性管理设计令牌，零黑盒依赖，可一键导出配置并直接应用到任何 React 项目中。

快速上手与示例代码

# 基于 shadcn/ui 初始化并引入组件
npx shadcn@latest add button card badge progress

import React from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardHeader, CardContent } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';

export default function LessonCard() {
  return (
    <Card className="max-w-md mx-auto border-2 border-border shadow-[0px_6px_0px_0px_var(--border)] rounded-2xl p-6">
      <CardHeader className="p-0 mb-4">
        <div className="flex items-center justify-between mb-2">
          <span className="text-xs font-extrabold uppercase tracking-wide text-muted-foreground">日常任务</span>
          <span className="text-xs font-bold text-primary">80% 完成</span>
        </div>
        <Progress value={80} className="h-4 rounded-full bg-muted" />
      </CardHeader>
      <CardContent className="p-0">
        <h3 className="text-xl font-extrabold tracking-tight text-foreground mb-4">学习 5 个新词汇</h3>
        <Button className="w-full h-12 rounded-[16px] font-extrabold uppercase tracking-wide bg-primary text-white border-2 border-primary shadow-[0px_4px_0px_0px_#47a802] active:translate-y-1 active:shadow-none transition-all">
          继续挑战
        </Button>
      </CardContent>
    </Card>
  );
}

技术选型建议与适用场景

非常适合：在线教育培训、语言学习、儿童编程、打卡打卡与健身习惯养成、积分商城，以及追求高趣味性与用户黏性的消费级 Web 与小程序产品。
与同类方案对比：相较于传统扁平冷静的中后台组件库（如 Ant Design、shadcn 默认主题），Duolingo UI 具有极其鲜明的趣味情绪价值与操作确定感；且完全保留了 shadcn 的源码直达和类型安全。

Duolingo UI (ShadLingo)

项目概述

核心特性

快速上手与示例代码

技术选型建议与适用场景

讨论与评价

相关组件推荐

8bitcn/ui

Astryx (Meta)

23rd