1 GitHub star = 1 new component.

Star the repo
Typographytypographyverticaldecorative

Side Header Text

Rotated vertical text with gradient fade for side decorations.

Side Header Text

Usage

Copy and paste this code into your React component:

tsx
import { FadedVerticalText } from 'react-component-kit-ui/typography';

<FadedVerticalText>Content</FadedVerticalText>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: src/components/FadedVerticalText.tsx + FadedVerticalText.css:

FadedVerticalText.tsx
'use client';

import type { ReactNode } from 'react';
import './FadedVerticalText.css';

/** FadedVerticalText โ€” ported from astro-component-kit. */
export interface FadedVerticalTextProps {
  children?: ReactNode;
}

export function FadedVerticalText({ children }: FadedVerticalTextProps) {
  return (
    <>
      <div className="v-txt" data-rk-79dd68="">{children}</div>
    </>
  );
}

export default FadedVerticalText;
FadedVerticalText.css
/* FadedVerticalText โ€” ported from astro-component-kit (typography/FadedVerticalText.astro) */

.v-txt:where([data-rk-79dd68]) { writing-mode: vertical-rl; transform: rotate(180deg); color: #334155; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.4em; text-transform: uppercase; white-space: nowrap; }

Quick Info

Category
Typography
Filename
FadedVerticalText.tsx
Dependencies
None โ€” pure React + CSS
Tags
typographyverticaldecorative