All components
Gradient Border
Background EffectsA card wrapped in a rotating conic-gradient border.
Pro plan
Everything, unlimited.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/gradient-border.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge2. Copy the component source into
components/library/gradient-border.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Card contents. |
| className | string | - | Classes applied to the wrapper. |
Accessibility
- The rotating layer is decorative and sits behind the content.
- Content keeps an opaque background, so text contrast is stable.
- Rotation is transform-only and compositor-friendly.
Dependencies
motionclsxtailwind-merge