Generative Art
Deterministic SVG placeholder art from a seed string: product screenshots, landscapes and portraits, or abstract mesh, bauhaus, rings, waves and orb. Use it for covers, photos and avatars; it can take its colors from the theme.
Installation
pnpm dlx shadcn@latest add @portfolio-kit/generative-artFirst time? Add the @portfolio-kit registry to components.json
components.json
{
"registries": {
"@portfolio-kit": "https://www.parthjadhav.com/products/portfolio-kit/r/{name}.json"
}
}Usage
Examples
Variants
Three stand-ins for real content — interface, landscape and portrait — and five abstract styles. Change the seed for a new palette and composition.
Theme Tone
tone="theme" paints with your theme's highlight, primary and accent tokens, so the art re-colors with the theme and mode.
Avatar Fallbacks
Seed an orb with a person's name for a unique, stable avatar when there's no photo — grain={false} keeps tiny sizes clean.