The `BundleFootprint` component provides a clean, animated visualization to compare metrics such as bundle sizes. It leverages Framer Motion for smooth bar chart expansion animations and seamlessly integrates into dark themes.
Live Preview
Import Bundle footprint
Zero-Weight Animation
Kinetic UI encapsulates complex math without bulky external assets. Standard components compile to an average of just 1.2KB.
Kinetic UI (average)1.2 KB
Conventional Library A14.8 KB
Conventional Library B22.4 KB
Installation
npx kinetic-ui-cli@latest add bundle-footprintProps
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | '#10b981' | The primary accent color for the highlighted bar. |
speed | number | 1 | Multiplier for the bar expansion animation speed. |
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { BundleFootprint } from "@/components/creative/bundle-footprint";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { BundleFootprint } from "@/components/creative/bundle-footprint";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<BundleFootprint
color="example"
speed{10}
/>
</div>
);
}