Basic: Demonstrates the Avatar component with different names and random background colors.

- Shows how the Avatar can display initials or a fallback when no photo is provided. - Useful for user lists, team members, or any entity with a name. - The color prop customizes the background color for each avatar. - Names are generated randomly for demonstration.

Photo: Demonstrates the Avatar component with user photos.

- Shows how to provide a photo prop to display a user's image. - If the photo fails to load, the Avatar will fallback to initials or a default state. - Useful for user profiles, comments, or chat applications. - Names and photos are generated randomly for demonstration.

Sizes: Demonstrates the different size options for the Avatar component.

- Shows how to use the size prop: "small", "medium", "large", and custom numeric values. - Useful for adapting Avatar to different UI contexts (e.g., lists, profile pages, dashboards). - Each avatar is given a unique color and labeled with its size. - Numeric sizes allow for precise control over avatar dimensions.

States: Demonstrates the different visual states for the Avatar component.

- Shows how to use the states prop: "default", "dash", "design", and "spotlight". - Each state may represent a different user status, role, or highlight in your application. - Useful for indicating user activity, special roles, or featured users.

Rounded: Demonstrates different border radius options for the Avatar component.

- Shows how to customize the rounded corners using className prop with rounded utilities. - Available options: rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-full. - Useful for adapting Avatar to different design styles or matching other UI elements. - The default Avatar uses rounded-full, but can be overridden with custom className.