Installation

Note: The installation process follows the same structure as shadcn/ui.

Initialize shadcn/ui

Run the init command to create a new project with shadcn/ui or set up an existing one.

Add the Azemmur registry

Open your project's components.json file and add the Azemmur registry to the registries field.
This allows you to pull components directly from the Azemmur distribution.

{
  "registries": {
    "@azemmur": "https://azemmur.raouf.codes/r/{name}.json"
  }
}

Add Components

Run the add command to add a component from the Azemmur registry.

Import Components

Import the component into your project.

// Copyright (c) 2026 raouf.codes - Azemmur

'use client';

import { cn } from '@workspace/ui/lib/utils';
import Image, { ImageProps } from 'next/image';
import { useState } from 'react';

const PLACEHOLDER_BLUR =
  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAwIiBoZWlnaHQ9IjQ3NSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjMjIyIi8+PC9zdmc+';

export const BlurImage = ({
  className,
  height = 210,
  width = 400,
  src,
  alt,
  blurDataURL,
  ...props
}: ImageProps) => {
  const [isLoading, setLoading] = useState(true);

  return (
    <div className={cn('relative overflow-hidden rounded-xl', className)}>
      {isLoading && (
        <div className="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/10 to-transparent" />
      )}
      <Image
        className={cn(
          'transition duration-300 rounded-xl',
          isLoading ? 'blur-sm scale-105' : 'blur-0 scale-100',
        )}
        aria-label={alt}
        onLoad={() => setLoading(false)}
        src={src as string}
        width={width}
        height={height}
        loading="lazy"
        decoding="async"
        placeholder="blur"
        blurDataURL={blurDataURL ?? PLACEHOLDER_BLUR}
        alt={alt}
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
        {...props}
      />
    </div>
  );
};

Customize and Extend

Make it yours — tweak, extend, and build on top of the foundation provided.

You’re now free to adapt, customize, and style your component however you like.
The Azemmur registry gives you full access to the source — feel free to modify variants, add new props, or integrate it with your design system.