V3CN

⌘ K

Getting Started

Components

Discord Presence

The DiscordPresence displays a rich Discord presence for a given user, showing their current activity such as listening to Spotify, playing a game, or their online status. This component integrates well with React & Next.Js applications and requires the user's Discord ID to function.

Playground

Installation

V3CN

pnpm dlx v3cn add discord

Shadcn

pnpm dlx shadcn@latest add 'https://v3cn.vineet.pro/r/discord'

Update your next config file

//rest of the settings
// add this in your image config object
 
images: {
  remotePatterns: [
    {
      protocol: "https",
      hostname: "i.scdn.co",
      port: "",
      pathname: "/image/**",
    },
    {
      protocol: "https",
      hostname: "cdn.discordapp.com",
      port: "",
      pathname: "**",
    },
  ],
},
// rest of the settings

Usage Examples

Default Usage

"use client";

import  { DiscordComponent } from "@/components/discord";

export default function Home() {
  return (
    <div className="flex justify-center items-center h-screen">
      <DiscordComponent
       userId="1018532712455352330"
       userName="vineet"
       activityDetailClass="dark:text-cyan-300"
       activityDescriptionClass="dark:text-[#ffbe6f]"
       progressBarClassName="dark:bg-[#ffbe6f]"
       localTimeClass="dark:text-green-500"
      />
    </div>
  );
}

Join this discord server to make your presence appear https://discord.gg/lanyard

Props

<Discord Presence />

userIdstring

The unique identifier for the Discord user.

userNamestring

The display name of the Discord user.

activityDescriptionClassstring

CSS class for styling the activity description.

activityImageClassNamestring

CSS class for styling the activity image.

activityDetailClassstring

CSS class for styling the activity details.

progressBarClassNamestring

CSS class for styling the progress bar (used for Spotify playback).

localTimeClassstring

CSS class for styling the local time display.