Skip to main content

Overrides

Overrides let you alter a component's behavior at runtime. This is an escape-hatch feature when you need more customization than uipkg can offer.

Usage‚Äč

Overrides is a prop that exists on all published components. You can use it to override the inner component tree to your liking. E.g. change element type, add extra attributes, bind event handlers or hide elements with display: none.

Here's an example that overrides Button element inside the component to show an anchor tag that opens a new tab to uipkg.com.

App.jsx
import Listing from "@martynas/listing";

const App = () => {
return (
<Listing
overrides={{
Button: {
as: "a",
href: "https://uipkg.com",
target: "_blank",
},
}}
/>
);
};

export default App;

Override key names are taken from your Figma component's elements. This prop also has TypeScript definitions, so you'll always know what you can override.