The Gradient Profile component generates colorful gradient avatars based on a seed value. Perfect for user avatars when no profile picture is available.
Basic Usage
import reflex_ui as ui
ui.gradient_profile(seed="user123")
Dynamic Seed
class State(rx.State):
user_id: str = "john.doe"
ui.gradient_profile(
seed=State.user_id,
class_name="size-16"
)
Demo Example
From demo/demo/demo.py:40-43:
class State(rx.State):
seed: int = 0
@rx.event
def set_seed(self, seed: int):
self.seed = seed
ui.slider(
value=State.seed,
on_value_change=State.set_seed,
class_name="max-w-xs",
)
ui.gradient_profile(
seed=State.seed,
class_name="size-10",
)
Different Sizes
# Small
ui.gradient_profile(seed="user1", class_name="size-8")
# Medium
ui.gradient_profile(seed="user1", class_name="size-12")
# Large
ui.gradient_profile(seed="user1", class_name="size-16")
# Extra Large
ui.gradient_profile(seed="user1", class_name="size-24")
Custom Colors
ui.gradient_profile(
seed="user123",
available_colors=[
"#FF6B6B",
"#4ECDC4",
"#45B7D1",
"#FFA07A",
"#98D8C8"
],
class_name="size-12"
)
In User List
users = [
{"id": "user1", "name": "John Doe"},
{"id": "user2", "name": "Jane Smith"},
{"id": "user3", "name": "Bob Johnson"},
]
rx.vstack(
*[
rx.hstack(
ui.gradient_profile(seed=user["id"], class_name="size-10"),
rx.text(user["name"]),
spacing="0.75rem"
)
for user in users
],
spacing="1rem",
align_items="flex-start"
)
comments = [
{"user_id": "alice", "username": "Alice", "text": "Great post!"},
{"user_id": "bob", "username": "Bob", "text": "Thanks for sharing."},
]
rx.vstack(
*[
rx.hstack(
ui.gradient_profile(seed=comment["user_id"], class_name="size-8"),
rx.vstack(
rx.text(comment["username"], font_weight="600", font_size="0.875rem"),
rx.text(comment["text"], font_size="0.875rem"),
align_items="flex-start",
spacing="0.25rem"
),
align_items="flex-start",
spacing="0.75rem"
)
for comment in comments
],
spacing="1rem",
align_items="flex-start",
width="100%"
)
Props Reference
Seed value to generate the gradient. Same seed always produces the same gradient. Can be a user ID, username, email, or any unique identifier.
Array of color hex codes to use in the gradient. If not provided, uses default color palette.
CSS classes for styling. Use Tailwind size classes like size-8, size-12, etc.
Default Styling
From source code at reflex_ui/components/base/gradient_profile.py:8:
- Default size: 4 units (1rem)
- Shape: Rounded full (perfect circle)
- Pointer events: None (non-interactive)
How It Works
The gradient is deterministically generated from the seed:
- The seed is hashed to produce consistent results
- Colors are selected from the available colors array
- A gradient is created with the selected colors
- Same seed always produces the same gradient
Implementation Details
From source code at reflex_ui/components/base/gradient_profile.py:11-31:
- Uses external library:
@carlosabadia/gradient-profile
- Generates deterministic gradients from seed values
- Lightweight with no JavaScript overhead
- Fully customizable through class names
- Perfect for placeholder avatars