Polymorphic Components (as prop) in React
From the React Design Patterns cheat sheet · Component API Patterns · verified Jul 2026
Polymorphic Components (as prop)
One component that can render as different elements based on an "as" prop
jsx
function Box({ as: Component = 'div', ...props }) {
return <Component {...props} />;
}
<Box>div by default</Box>
<Box as="section">renders a section</Box>
<Box as="a" href="/home">renders an anchor</Box>
<Box as={Link} to="/home">renders a Link</Box>💡 The "as" prop pattern keeps semantics flexible while sharing styling and behavior
⚡ Default the "as" prop with a destructure default (as: Component = "div")
📌 Type-safe polymorphism in TypeScript needs ElementType + ComponentPropsWithoutRef
🟢 Used by every major React UI library - Radix, Chakra, Mantine, shadcn/ui
polymorphicas-propapi