DecoProfile is a comprehensive web interface and component library that brings the magic of Discord-style profile decorations to your web applications. Explore, preview, and implement stunning animated avatars, profile effects, and namespace decorations with ease.
- 🎨 Extensive Library - browse hundreds of avatar decorations and profile effects.
- ⚡️ Live Preview - Instantly preview how decorations look on different avatars and profiles.
- 🛠️ Component Library - Production-ready React components for easy integration.
- 📱 Responsive Design - Fully responsive UI built with Tailwind CSS.
- 🔍 Smart Search - Quickly find specific decorations by name or category.
- 🌙 Dark Mode - Native dark mode support for comfortable viewing.
- 💎 TypeScript Support - Full type safety with autocomplete for decoration names.
- Framework: Next.js 15 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- Icons: Lucide React
- State Management: React Hooks
- Package Manager: NPM / Bun
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
DecoProfile isn't just a showcase; it provides the decoprofile NPM package for your own projects.
npm install decoprofileimport {
AvatarDecoration,
ProfileDecoration,
NamespaceDecoration,
} from "decoprofile";
function App() {
const avatarUrl = "https://example.com/avatar.jpg";
return (
<div>
{/* Avatar with animated decoration */}
<AvatarDecoration name="Akuma" src={avatarUrl} size={160} />
{/* Profile card with background effect */}
<ProfileDecoration name="OnisCurse" src={avatarUrl}>
<h2>Username</h2>
<p>Premium User</p>
</ProfileDecoration>
{/* Namespace bar with video background */}
<NamespaceDecoration name="Reddragon" src={avatarUrl} userName="Player" />
</div>
);
}Use DecoProfile directly in HTML without any build tools. Download the browser bundle:
<!DOCTYPE html>
<html>
<head>
<title>DecoProfile Demo</title>
</head>
<body>
<div id="my-avatar"></div>
<div id="my-profile"></div>
<!-- Single script - includes React! -->
<script src="decoprofile.browser.js"></script>
<script>
DecoProfile.render("#my-avatar", "Avatar", {
name: "Aurora",
src: "https://avatars.githubusercontent.com/u/124573409?v=4",
size: 160,
});
</script>
</body>
</html>Adds animated decoration frames around user avatars.
<AvatarDecoration
name="Akuma" // Decoration name (autocomplete available)
src="/avatar.jpg" // User's avatar image URL
size={160} // Size in pixels (default: 160)
className="custom" // Optional CSS class
/>| Prop | Type | Default | Description |
|---|---|---|---|
name |
AvatarDecorationName |
required | Decoration effect name |
src |
string |
required | User's avatar image URL |
size |
number |
160 |
Size in pixels |
className |
string |
- | Optional CSS class |
Creates profile cards with animated background effects.
<ProfileDecoration
name="OnisCurse" // Effect name (autocomplete available)
src="/avatar.jpg" // User's avatar image URL
scale={1} // Scale multiplier (default: 1)
>
<h2>Username</h2>
<p>Status text</p>
</ProfileDecoration>| Prop | Type | Default | Description |
|---|---|---|---|
name |
ProfileDecorationName |
required | Profile effect name |
src |
string |
required | User's avatar image URL |
children |
ReactNode |
- | Content below avatar |
scale |
number |
1 |
Scale multiplier (1 = 300px width) |
className |
string |
- | Optional CSS class |
Animated namespace bars with video background effects.
<NamespaceDecoration
name="Reddragon" // Namespace name (autocomplete available)
src="/avatar.jpg" // User's avatar image URL
userName="Player" // Display name
scale={1} // Scale multiplier (default: 1)
>| Prop | Type | Default | Description |
|---|---|---|---|
name |
NamespaceDecorationName |
required | Namespace effect name |
src |
string |
- | User's avatar image URL |
userName |
string |
"User" |
Display name in the bar |
scale |
number |
1 |
Scale multiplier (1 = 260x52px) |
className |
string |
- | Optional CSS class |
DecoProfile includes a wide variety of decorations:
- 334 Avatar decoration effects
- 84 Namespace decoration effects
- 116 Profile background effects
All decoration names provide TypeScript autocomplete for easy discovery.
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.