1 GitHub star = 1 new component.

Star the repo
Typographytypographycodeglass

Inline Code (Glass)

Inline code tag with frosted glass background.

Inline Code (Glass)

Usage

Copy and paste this code into your React component:

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

<CodeInlineGlass>Content</CodeInlineGlass>

Manual Installation

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

CodeInlineGlass.tsx
'use client';

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

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

export function CodeInlineGlass({ children }: CodeInlineGlassProps) {
  return (
    <>
      <code className="glass-code" data-rk-8ec09e="">{children}</code>
    </>
  );
}

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

.glass-code:where([data-rk-8ec09e]) { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); padding: 0.2rem 0.4rem; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color: #e2e8f0; font-size: 0.9em; }

Quick Info

Category
Typography
Filename
CodeInlineGlass.tsx
Dependencies
None โ€” pure React + CSS
Tags
typographycodeglass