1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Типографикаtypographylabellayout

Floating Label

Плавающая текстовая метка со свечением для акцента на ключевых свойствах.

PREMIUMFloating Label

Использование

Скопируйте и вставьте этот код в ваш React-компонент:

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

<FloatingTextLabel>Content</FloatingTextLabel>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/FloatingTextLabel.tsx + FloatingTextLabel.css:

FloatingTextLabel.tsx
'use client';

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

/** FloatingTextLabel — ported from astro-component-kit. */
export interface FloatingTextLabelProps {
  children?: ReactNode;
}

export function FloatingTextLabel({ children }: FloatingTextLabelProps) {
  return (
    <>
      <div className="f-label-wrap" data-rk-f9cb2b="">
        <span className="f-label" data-rk-f9cb2b="">PREMIUM</span>
        {children}
      </div>
    </>
  );
}

export default FloatingTextLabel;
FloatingTextLabel.css
/* FloatingTextLabel — ported from astro-component-kit (typography/FloatingTextLabel.astro) */

.f-label-wrap:where([data-rk-f9cb2b]) { position: relative; padding-top: 1.5rem; }
.f-label:where([data-rk-f9cb2b]) { position: absolute; top: 0; left: 0; font-size: 0.7rem; font-weight: 800; color: #6366f1; letter-spacing: 0.2em; text-transform: uppercase; }

Краткая информация

Категория
Типографика
Имя файла
FloatingTextLabel.tsx
Зависимости
Нет — чистый React + CSS
Теги
typographylabellayout