A component that applies a gradient background to its children, with hover effects and customizable styles.
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The content to display within the gradient background. |
| className | string | - | Additional CSS classes for custom styling. |
A component that applies a gradient background with a customizable border size to its children. The gradient background has hover effects and can be styled with additional classes.
GradientBackground Props
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The content to display within the gradient background. |
| className | string | - | Additional CSS classes for custom styling. |
| borderSize | number | 0.25 | The size of the border around the gradient background, in rem units. |
The component provides a sophisticated interactive effect that responds to mouse movements. When a user moves their cursor over the HighlightGroup, the HighlighterItem elements within it glow and animate dynamically, creating a visually engaging experience. This effect is ideal for drawing attention to specific areas of your application or website, enhancing user interaction through seamless integration and customizable styling. It is not suitable for small screens, thus it is recommended to have an alternative for the mobile version.
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The content inside the HighlightGroup component. |
| className | string | "" | Additional CSS classes for custom styling of the container. |
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The content inside the HighlighterItem component. |
| className | string | "" | Additional CSS classes for custom styling of the item. |
| backgroundProps | string | - | CSS properties to style the background of the HighlighterItem component. |
The Rotating Border Animation component adds a stylish, rotating border effect to your UI elements. This dynamic animation captures attention and enhances the visual appeal of buttons, sections, or any highlighted content.
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The content inside the ConicGradientContainer component. |
| direction | "clockwise" | "anticlockwise" | "clockwise" | The direction of the conic gradient spin. Options are "clockwise" and "anticlockwise". |
A container component with a customizable conic gradient background and additional styling options. It features a flexible design with responsive gradients that adapt to light and dark themes.
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The content inside the ConicGradientContainer component. |
| className | string | - | Additional CSS classes for custom styling of the container. |
This effect adds a modern and sophisticated touch to your UI, blending background elements with a subtle blur for a clean and elegant look. Ideal for modals, overlays, or sections.
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The content inside the ContainerGlassEffect component. |
| className | string | - | Additional CSS classes for custom styling of the container. |
| ...props | React.HTMLAttributes<HTMLDivElement> | - | Additional HTML attributes to be passed to the container element. |
A React component that displays a moving gradient effect based on the mouse position within the container.
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The content to be rendered inside the container. |
| className | string | - | Additional classes to apply to the main container. |
| movingGradientClassName | string | - | Additional classes to apply to the moving gradient element. |
| ...props | React.HTMLAttributes<HTMLDivElement> | - | Any other props will be passed to the main container element. |