.det .det-faner,.det .det-js-kun{display:none!important}.det .det-bar{padding:0;border:0}.det .det-panel[hidden]{display:block!important}.det .det-panel+.det-panel{margin-top:48px}.det .det-panel-h{position:static;width:auto;height:auto;margin:0 0 14px;overflow:visible;clip-path:none;white-space:normal}.det .det-win-inner{width:100%!important;height:100%!important;left:0;transform:none}.det .det-shutter{display:none}

Charge Border

borderPro

En knitrende elektrisk kant om vilkårligt indhold, tegnet to gange langs en sti, som støj forskyder: én gang som glød og én gang som en skarp kerne.

Åbner snart

Pro kan ikke købes endnu. Siden åbner, når betalingen er klar.

Bredde

Forhåndsvisningen kunne ikke hentes.

Live demo. Temaet skifter selve demoen.

charge-border.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type ChargeBorderProps = {  children?: ReactNode  color?: string  glowColor?: string  chaos?: number  speed?: number  thickness?: number  glow?: number  radius?: number  bleed?: number  active?: boolean  seed?: number  className?: string}export function ChargeBorder({  children,  color = 'currentColor',  glowColor,  chaos = 0.55,  speed = 1,  thickness = 1.5,  glow = 1,  radius = 16,  bleed = 28,  active = true,  seed = 7,  className,}: ChargeBorderProps) {  const ref = useRef<HTMLDivElement>(null)  useEffect(() => {    const el = ref.current    if (!el) return  }, [])  return <div ref={ref} className={cn('relative', className)} />}

Koden er låst

Charge Border er en del af Manniche UI Pro. En nøgle åbner kildekoden til alle 60 effekter.

Åbner snart

49 € · Introduktionspris til og med 31. december 2026. Derefter 79 €.

Engangsbetaling
Én udvikler
Nøglen kommer på mail med det samme
Ingen moms (§ 19 UStG)

Har du en nøgle? Hent koden med CLI eller MCP.

Nøglen ligger i MANNICHE_PRO_KEY, aldrig i koden eller i adressen. Sådan sætter du den op

CLInpx shadcn@latest add @manniche-pro/charge-border

MCP

claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"

ChargeBorderProps

Prop	Type	Standard	Hvad den gør
`children`	`ReactNode`	–	The content to wrap. The border takes the size of this content (or of the `className` size) and follows it when it resizes.
`className`	`string`	–	Extra classes for the wrapper. Size, padding and background of the framed content go here.
`color`	`string`	`'currentColor'`	Colour of the crisp core line. Any CSS colour, including `currentColor` and `var(--x)`. The core is drawn brighter than this colour.
`glowColor`	`string`	–	Colour of the glow around the line. Defaults to `color`.
`chaos`	`number`	`0.55`	How wild the crackle is, from 0 (a calm, wavy line) to 1 (violent, spiky).
`speed`	`number`	`1`	How fast the line changes, 1 is a lively crackle.
`thickness`	`number`	`1.5`	Width of the core line in CSS pixels.
`glow`	`number`	`1`	How strong the glow is, from 0 (none) to 2 (a heavy bloom).
`radius`	`number`	`16`	Corner radius of the frame in CSS pixels. It is also applied to the wrapper, so the content can be clipped to match.
`bleed`	`number`	`28`	Extra room around the frame for the glow and the crackle to spill into, in CSS pixels. Costs nothing in layout.
`active`	`boolean`	`true`	Turn the crackle on or off. It fades in and out and the loop sleeps while it is off, handy for "charge on hover".
`seed`	`number`	`7`	Seed for the noise, so several borders next to each other do not crackle in unison.

Preview

Kode

Koden er låst

Props

A11y