cyberpunk-ui

Use the CSS clip-path property with a polygon() function that cuts the corners at fixed pixel offsets, such as polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px)). This creates the signature angled cyberpunk cut without border-radius.

Extend CustomClipper<Path> and trace the corner cuts in getClip using lineTo calls, then wrap your Container in ClipPath. For borders, use a CustomPaint with a CustomPainter tracing the same path since ClipPath alone cannot stroke edges.

React Native does not natively support clip paths on views. Use react-native-svg to draw an absolute-positioned Polygon as the background behind transparent text, defining the cut corners via the points attribute.

The palette uses absolute black (#000000) or deep charcoal backgrounds with neon accents: Acid Yellow (#FCE205), Cyan (#00FFFF), and Hot Pink (#FF003C). Typography pairs industrial squared sans-serifs like Rajdhani or Teko with small monospace fonts for data streams.

Avoid it when the product needs soft, organic, or approachable branding, since the style demands sharp aggressive geometry with no rounded corners or gradients. Also verify contrast ratios and accessibility separately, as neon-on-black combinations can fail readability standards.