How do I use Electric Scooter in my project?

Copy the ElectricScooterWidget source code from https://opensourceui.in/components/electric-scooter, add lib/cn.ts if needed, install clsx tailwind-merge and lucide-react, then import and render the component in your React or Next.js app.

Can I use Electric Scooter in a commercial project?

Yes. Opensource UI is MIT licensed. You can use ElectricScooterWidget in personal and commercial projects without UI attribution.

Back to Travel

Components / Travel

Electric Scooter

Ride summary with scooter photo, distance, average speed, and duration. Leaf icon included — built for micro-mobility or fitness stats.

Preview

Electric Scooter

12 Aug 2024

Distance

3.2km

Avg speed

18.4km/h

Duration

22 min

Setup

How to use

Free for personal and commercial use. No UI attribution required. Include the MIT copyright notice when copying component source into your project. Read the MIT license.

1
Run in your terminal:
$npm install clsx tailwind-merge lucide-react
2
Copy lib/cn.ts below. Skip if you already have cn().
3
Copy the code below and create components/travel/electric-scooter-widget.tsx in your project.
4
Import and render:
Example
import { ElectricScooterWidget } from "@/components/travel/electric-scooter-widget";
<ElectricScooterWidget />

lib/cn.ts

1
2
3
4
5
6
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

components/travel/electric-scooter-widget.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
"use client";
 
import { forwardRef, type ComponentPropsWithoutRef } from "react";
import Image from "next/image";
 
import { cn } from "@/lib/cn";
import { Leaf, Bike } from "lucide-react";
 
export type ElectricScooterWidgetProps = Readonly<
  {
    title?: string;
    date?: string;
    distance?: string;
    avgSpeed?: string;
    duration?: string;
    image?: string;
  } & ComponentPropsWithoutRef<"div">
>;
 
// Production-ready Electric Scooter component — styled with Tailwind CSS.
export const ElectricScooterWidget = forwardRef<
  HTMLDivElement,
  ElectricScooterWidgetProps
>(
  (
    {
      className,
      title = "Electric Scooter",
      date = "12 Aug 2024",
      distance = "3.2km",
      avgSpeed = "18.4km/h",
      duration = "22 min",
      image = "/scooter.png",
      ...props
    },
    ref,
  ) => (
    <div
      ref={ref}
      data-slot="electric-scooter-widget"
      className={cn(
        "flex w-72 items-stretch gap-3 rounded-3xl border border-neutral-100 bg-white p-3 font-sans shadow-lg",
        className,
      )}
      {...props}
    >
      <div className="relative h-28 w-24 shrink-0 overflow-hidden rounded-2xl bg-neutral-50">
        <Image
          src={image}
          alt={title}
          fill
          className="object-contain p-2"
          sizes="96px"
        />
      </div>
 
      <div className="flex min-w-0 flex-1 flex-col justify-between py-1">
        <div className="flex items-start justify-between">
          <div>
            <p className="text-sm font-bold text-neutral-900">{title}</p>
            <p className="text-[10px] text-neutral-500">{date}</p>
          </div>
          <Leaf size={14} className="text-emerald-500" aria-hidden />
        </div>
 
        <div className="grid grid-cols-3 gap-1 border-t border-neutral-100 pt-2">
          <div>
            <p className="text-[9px] text-neutral-400">Distance</p>
            <p className="text-[10px] font-semibold">{distance}</p>
          </div>
          <div>
            <p className="text-[9px] text-neutral-400">Avg speed</p>
            <p className="text-[10px] font-semibold">{avgSpeed}</p>
          </div>
          <div>
            <p className="text-[9px] text-neutral-400">Duration</p>
            <p className="flex items-center gap-0.5 text-[10px] font-semibold">
              <Bike size={8} />
              {duration}
            </p>
          </div>
        </div>
      </div>
    </div>
  ),
);
 
ElectricScooterWidget.displayName = "ElectricScooterWidget";

"use client"; import { forwardRef, type ComponentPropsWithoutRef } from "react"; import Image from "next/image"; import { cn } from "@/lib/cn"; import { Leaf, Bike } from "lucide-react"; export type ElectricScooterWidgetProps = Readonly< { title?: string; date?: string; distance?: string; avgSpeed?: string; duration?: string; image?: string; } & ComponentPropsWithoutRef<"div"> >; // Production-ready Electric Scooter component — styled with Tailwind CSS. export const ElectricScooterWidget = forwardRef< HTMLDivElement, ElectricScooterWidgetProps >( ( { className, title = "Electric Scooter", date = "12 Aug 2024", distance = "3.2km", avgSpeed = "18.4km/h", duration = "22 min", image = "/scooter.png", ...props }, ref, ) => ( <div ref={ref} data-slot="electric-scooter-widget" className={cn( "flex w-72 items-stretch gap-3 rounded-3xl border border-neutral-100 bg-white p-3 font-sans shadow-lg", className, )} {...props} > <div className="relative h-28 w-24 shrink-0 overflow-hidden rounded-2xl bg-neutral-50"> <Image src={image} alt={title} fill className="object-contain p-2" sizes="96px" /> </div> <div className="flex min-w-0 flex-1 flex-col justify-between py-1"> <div className="flex items-start justify-between"> <div> <p className="text-sm font-bold text-neutral-900">{title}</p> <p className="text-[10px] text-neutral-500">{date}</p> </div> <Leaf size={14} className="text-emerald-500" aria-hidden /> </div> <div className="grid grid-cols-3 gap-1 border-t border-neutral-100 pt-2"> <div> <p className="text-[9px] text-neutral-400">Distance</p> <p className="text-[10px] font-semibold">{distance}</p> </div> <div> <p className="text-[9px] text-neutral-400">Avg speed</p> <p className="text-[10px] font-semibold">{avgSpeed}</p> </div> <div> <p className="text-[9px] text-neutral-400">Duration</p> <p className="flex items-center gap-0.5 text-[10px] font-semibold"> <Bike size={8} /> {duration} </p> </div> </div> </div> </div> ), ); ElectricScooterWidget.displayName = "ElectricScooterWidget";