Directory for on-going personal projects.
Highly flexible component composition API for React
- Establish cleaner standard for React component composition
- Improve DX by flattening deeply nested component trees
- Provide clearer component variant definitions
defineSlotGrouputil to flatten nested component layouts, such as:
// This component tree with nested nodes
<Card>
<CardHeader>
<CardTitle>{...}</CardTitle>
<CardAction>{...}</CardAction>
</CardHeader>
</Card>
// Can also be written as
<Card>
<Card.Slot at="header.title">{...}</Card.Slot>
<Card.Slot at="header.action">{...}</Card.Slot>
</Card>defineVariantutil to declare component tied to its variants definitions. The component must return a single ReactElement, which props will be gathered for defaults:
// This component with variants
export const tvTag = tv({ base: '...', variants: { border: { ... } } });
type TagProps = React.ComponentProps<'span'> & VariantProps<typeof tvTag>;
export const Tag = ({ border, className, ...props }: TagProps) => (
<span className={tvTag({ border, className })} {...props} />
);
// Can also be written as
export const Tag = defineVariant((props: React.ComponentProps<'span'>) => (
<span className='...' {...props} />
), tv({ variants: { border: { ... } } }));- css-variants@2.3.4
- tailwind-merge@3.4.0