Duolingo UI (ShadLingo)

Overview

Duolingo UI (ShadLingo) is a complete adaptation of Duolingo's world-renowned gamification design language built atop shadcn/ui v4 and Tailwind CSS. By translating Duolingo's playful educational aesthetics into a modern React component system, ShadLingo delivers the beloved chunky 3D buttons, saturated "Owl Green" accents, bold uppercase typography, and tactile questionnaire cards straight into your codebase. Built on top of Radix UI primitives, it marries joyful, kid-friendly visual warmth with enterprise-grade accessibility, responsiveness, and zero-runtime-lock-in flexibility.

Key Features

• 🎮 Chunky 3D Tactile Buttons: Implements signature 4px solid drop shadows (shadow-[0px_4px_0px_0px_...]), thick 2px borders, and 16px corner radii with satisfying active click depressions.
• 🦉 Authentic Duolingo Palette: Rigorously defined OKLCH and CSS tokens capturing Owl Green (#58cc02), Spark Blue, and cartoon contrast neutrals with flawless light/dark mode parity.
• 🧩 60+ Adapted shadcn Components: Extends far beyond basic buttons to include speech bubbles, questionnaire cards, animated progress meters, dialogs, drawers, and form controls.
• ⚙️ Tailwind CSS v4 & OKLCH Architecture: Powered by modern CSS variables and utility classes, allowing teams to export tokens into existing Next.js, Vite, or Astro projects in seconds.

Installation & Quick Start

# Add standard shadcn/ui primitives to your project
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 QuestCard() {
  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">Daily Goal</span>
          <span className="text-xs font-bold text-primary">80% Done</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">Learn 5 New Words</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">
          Continue Lesson
        </Button>
      </CardContent>
    </Card>
  );
}

Why Choose Duolingo UI?

1. Unrivaled Gamification Appeal: Drives habit formation, visual delight, and user retention through physical tactile depth and energetic, playful color contrasts.
2. Zero Compromise on Quality: Retains 100% of shadcn's accessibility, keyboard navigation, and TypeScript type safety while swapping sterile default styles for high-personality charm.