Assets

Source-driven image assets

Drop PNG, JPG, WebP, AVIF, or GIF files into assets/src, rebuild, and public paths, React helpers, and the registry item update from folder contents.

Registry setup

grid-background

/rhythmic-assets/grid-background.png

Add Assets

1 assets generated from folder contents.

# Drop images here:
assets/src

pnpm assets:build

Use Assets

import { AssetBackground, assetPaths } from "@/components/ui/assets"

<div style={{ backgroundImage: `url(${assetPaths.gridBackground})` }} />
<AssetBackground assetKey="gridBackground" />

Registry

pnpm dlx shadcn@latest add @rhythmic-ui/assets

Generated Paths

{
  "gridBackground": "/rhythmic-assets/grid-background.png"
}