Documentation

Complete guide to using DecoProfile in your React applications.

01.InstallationCommands

terminal

npm install decoprofile

02.BasicUsage

Import the core components and styles in your application entry point.

app/layout.tsx

import { AvatarDecoration, ProfileDecoration, NamespaceDecoration } from 'decoprofile';

03.AvatarDecorations

Wrap any image or component with AvatarDecoration to add animated frames.

components/UserProfile.tsx

import { AvatarDecoration } from 'decoprofile';

export default function UserProfile() {
  return (
    <AvatarDecoration 
      name="Akuma"
      src="/avatar.jpg"
      size={160}
    />
  );
}

04.ProfileEffects

Add stunning background animations to your profile cards or sections.

components/ProfileCard.tsx

import { ProfileDecoration } from 'decoprofile';

export default function ProfileCard() {
  return (
    <ProfileDecoration 
      name="OnisCurse"
      src="/avatar.jpg"
    >
      <h2>Username</h2>
      <p>Premium Member</p>
    </ProfileDecoration>
  );
}

05.APIReference

AvatarDecoration Props

Prop	Type	Default	Description
variant	string	'default'	The style variant identifier.
size	'sm' \| 'md' \| 'lg'	'md'	Size of the decoration frame.