Primitives
Slot
Motion-enhanced composition primitive for the asChild pattern with spring animations.
Slot
A motion-enhanced composition primitive that enables the asChild pattern — merging component props and behavior onto a child element while supporting spring-based animations.
Import
import { Slot } from '@mks2508/mks-ui/react';How It Works
When a component uses Slot internally and the consumer passes asChild, the component's styles, handlers, and refs are merged onto the child element instead of rendering a wrapper:
// Without asChild — renders <button>
<Button>Click me</Button>
// Output: <button class="...">Click me</button>
// With asChild — renders <a> with button styles
<Button asChild>
<a href="/docs">Click me</a>
</Button>
// Output: <a href="/docs" class="...">Click me</a>asChild Example
asChild Pattern
.tsx
<div className="flex gap-4">
<Button>Regular Button</Button>
<Button asChild>
<a href="#">Link Button</a>
</Button>
</div>Direct Usage
For advanced use cases, you can use Slot directly:
function MyComponent({ asChild, children, className, ...props }) {
const Comp = asChild ? Slot : 'div';
return (
<Comp className={cn('my-styles', className)} {...props}>
{children}
</Comp>
);
}Motion Enhancement
Unlike a plain Slot, the mks-ui Slot primitive integrates with motion/react for spring-based animations on composed elements.
API Reference
| Prop | Type | Description |
|---|---|---|
children | ReactElement | Single child element to merge props onto |
| All HTML props | HTMLAttributes | Props to merge onto the child |