Code Snippet

Syntax-highlighted, copyable code blocks powered by Shiki. Adapts to light and dark mode automatically. Snippets longer than 15 lines collapse with a gradient fade and a Show more button.

Basic

Pass a code string and optional language (defaults to tsx). A copy button appears on hover in the top-right corner.

import { Button } from "@/app/ui-kit/pixelplay-ui/shared/ui/button";

export function Example() {
  return (
    <Button variant="solid" color="primary" size="md">
      Click me
    </Button>
  );
}

With filename

Add a filename prop to display a header bar above the code — useful when showing full file examples.

NotificationsToggle.tsx

"use client";

import { useState } from "react";
import { Toggle } from "@/app/ui-kit/pixelplay-ui/shared/ui/toggle";

export function NotificationsToggle() {
  const [enabled, setEnabled] = useState(false);

  return (
    <Toggle
      checked={enabled}
      onChange={setEnabled}
      label="Email notifications"
      description="Receive a summary of your activity."
    />
  );
}

Show more

Snippets longer than 15 lines automatically collapse. A smooth easing gradient fades the bottom edge, and a Show more button expands the block.

design.model.ts

import mongoose, { Schema } from 'mongoose'

// Collection name
export const collection = 'Design'

// Schema
const schema = new Schema({
  name: {
    type: String,
    required: true
  },

  description: {
    type: String
  },

  tags: {
    type: [String],
    default: []
  },

  author: {
    type: Schema.Types.ObjectId,
    ref: 'User',
    required: true
  },

  thumbnail: {
    type: String
  },

  isPublished: {
    type: Boolean,
    default: false
  },

  viewCount: {
    type: Number,
    default: 0
  },

  likeCount: {
    type: Number,
    default: 0
  },

  createdAt: {
    type: Date,
    default: Date.now
  }
}, {
  timestamps: true
})

// Indexes
schema.index({ name: 'text', description: 'text' })
schema.index({ author: 1, isPublished: 1 })

// Model
export default mongoose.model(collection, schema, collection)

Shell

Set language="bash" for terminal and shell command blocks.

# Install with npm
npm install @pixelplay/ui

# Or with yarn
yarn add @pixelplay/ui

# Or with pnpm
pnpm add @pixelplay/ui

JSON

Configuration files, API responses, and data payloads.

package.json

{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    "next": "^15.0.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwindcss": "^4.0.0"
  },
  "devDependencies": {
    "typescript": "^5.0.0",
    "@types/react": "^19.0.0"
  }
}

CSS

Stylesheet examples, theme tokens, and design system variables.

globals.css

@layer base {
  :root {
    --primary: oklch(55% 0.22 264);
    --on-primary: oklch(100% 0 0);
    --primary-container: oklch(92% 0.08 264);
    --on-primary-container: oklch(25% 0.18 264);

    --surface: oklch(99% 0 0);
    --surface-container-low: oklch(96% 0 0);
    --surface-container: oklch(94% 0 0);
    --on-surface: oklch(15% 0 0);
    --on-surface-variant: oklch(45% 0 0);
    --outline-variant: oklch(88% 0 0);
  }
}