Code Snippets

An FAQ layout with formatted code blocks inside answers. Built for developer docs where responses need syntax examples, commands, or configuration shown.

import { useState } from 'react';
import { Check, Copy, Search } from 'lucide-react';
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';

type LanguageId = 'javascript' | 'typescript' | 'python' | 'java';

const languageTabs = [
  { id: 'javascript' as const, label: 'JavaScript' },
  { id: 'typescript' as const, label: 'TypeScript' },
  { id: 'python' as const, label: 'Python' },
  { id: 'java' as const, label: 'Java' },
];

const faqs = [
  {
    category: 'Authentication',
    items: [
      {
        question: 'How do I authenticate API requests?',
        answer:
          'You can authenticate requests using an API key in the Authorization header. All API requests must be made over HTTPS.',
        examples: {
          javascript: `
// Using fetch API
fetch('https://api.example.com/v1/data', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
`,
          typescript: `
// Using axios with TypeScript
import axios from 'axios';

interface ApiResponse {
  success: boolean;
  data: any;
}

async function fetchData(): Promise<ApiResponse> {
  try {
    const response = await axios.get<ApiResponse>('https://api.example.com/v1/data', {
      headers: {
        'Authorization': 'Bearer YOUR_API_KEY',
        'Content-Type': 'application/json'
      }
    });
    return response.data;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error;
  }
}
`,
          python: `
# Using requests library
import requests

headers = {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
}

response = requests.get('https://api.example.com/v1/data', headers=headers)

if response.status_code == 200:
    data = response.json()
    print(data)
else:
    print(f"Error: {response.status_code}")
    print(response.text)
`,
          java: `
// Using Java HttpClient (Java 11+)
import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;

public class ApiClient {
    public static void main(String[] args) {
        HttpClient client = HttpClient.newHttpClient();
        
        HttpRequest request = HttpRequest.newBuilder()
            .uri(URI.create("https://api.example.com/v1/data"))
            .header("Authorization", "Bearer YOUR_API_KEY")
            .header("Content-Type", "application/json")
            .GET()
            .build();
            
        client.sendAsync(request, HttpResponse.BodyHandlers.ofString())
            .thenApply(HttpResponse::body)
            .thenAccept(System.out::println)
            .join();
    }
}
`,
        },
      },
      {
        question: 'How do I refresh an access token?',
        answer:
          'When an access token expires, use the refresh token to obtain a new one. This avoids interrupting the user experience by requiring them to log in again.',
        examples: {
          javascript: `
// Refresh token example
async function refreshAccessToken(refreshToken) {
  const response = await fetch('https://api.example.com/v1/auth/refresh', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      refresh_token: refreshToken
    })
  });
  
  const data = await response.json();
  
  if (!response.ok) {
    throw new Error('Failed to refresh token');
  }
  
  return {
    accessToken: data.access_token,
    refreshToken: data.refresh_token
  };
}
`,
          typescript: `
// Refresh token with TypeScript
interface TokenResponse {
  access_token: string;
  refresh_token: string;
  expires_in: number;
}

async function refreshAccessToken(refreshToken: string): Promise<TokenResponse> {
  const response = await fetch('https://api.example.com/v1/auth/refresh', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      refresh_token: refreshToken
    })
  });
  
  if (!response.ok) {
    throw new Error(\`Failed to refresh token: \${response.status}\`);
  }
  
  return await response.json() as TokenResponse;
}
`,
          python: `
# Refresh token in Python
import requests

def refresh_access_token(refresh_token):
    url = 'https://api.example.com/v1/auth/refresh'
    payload = {
        'refresh_token': refresh_token
    }
    
    response = requests.post(url, json=payload)
    
    if response.status_code == 200:
        token_data = response.json()
        return {
            'access_token': token_data['access_token'],
            'refresh_token': token_data['refresh_token']
        }
    else:
        raise Exception(f"Failed to refresh token: {response.status_code}")
`,
          java: `
// Refresh token in Java
import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;
import org.json.JSONObject;

public class TokenRefresher {
    public static JSONObject refreshAccessToken(String refreshToken) throws Exception {
        HttpClient client = HttpClient.newHttpClient();
        
        JSONObject requestBody = new JSONObject();
        requestBody.put("refresh_token", refreshToken);
        
        HttpRequest request = HttpRequest.newBuilder()
            .uri(URI.create("https://api.example.com/v1/auth/refresh"))
            .header("Content-Type", "application/json")
            .POST(HttpRequest.BodyPublishers.ofString(requestBody.toString()))
            .build();
            
        HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());
        
        if (response.statusCode() != 200) {
            throw new Exception("Failed to refresh token: " + response.statusCode());
        }
        
        return new JSONObject(response.body());
    }
}
`,
        },
      },
    ],
  },
  {
    category: 'Data Handling',
    items: [
      {
        question: 'How do I upload files to the API?',
        answer:
          'Use multipart/form-data encoding to upload files. The API supports various file formats including images, documents, and archives up to 100MB in size.',
        examples: {
          javascript: `
// File upload using FormData
function uploadFile(file) {
  const formData = new FormData();
  formData.append('file', file);
  formData.append('description', 'File upload example');
  
  return fetch('https://api.example.com/v1/files/upload', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer YOUR_API_KEY'
      // No Content-Type header needed, it's set automatically with FormData
    },
    body: formData
  })
  .then(response => response.json());
}

// Example usage with file input
document.querySelector('#fileInput').addEventListener('change', (e) => {
  const file = e.target.files[0];
  uploadFile(file).then(result => console.log('Upload result:', result));
});
`,
          typescript: `
// File upload with TypeScript
interface UploadResponse {
  success: boolean;
  fileId: string;
  url: string;
}

async function uploadFile(file: File): Promise<UploadResponse> {
  const formData = new FormData();
  formData.append('file', file);
  formData.append('description', 'File upload example');
  
  const response = await fetch('https://api.example.com/v1/files/upload', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer YOUR_API_KEY'
    },
    body: formData
  });
  
  if (!response.ok) {
    throw new Error(\`Upload failed: \${response.status}\`);
  }
  
  return await response.json() as UploadResponse;
}
`,
          python: `
# File upload in Python
import requests

def upload_file(file_path, description):
    url = 'https://api.example.com/v1/files/upload'
    
    headers = {
        'Authorization': 'Bearer YOUR_API_KEY'
    }
    
    files = {
        'file': open(file_path, 'rb')
    }
    
    data = {
        'description': description
    }
    
    response = requests.post(url, headers=headers, files=files, data=data)
    
    if response.status_code == 200:
        return response.json()
    else:
        raise Exception(f"Upload failed: {response.status_code}")
`,
          java: `
// File upload in Java
import java.io.File;
import java.nio.file.Files;
import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;
import java.util.UUID;

public class FileUploader {
    public static String uploadFile(File file, String description) throws Exception {
        String boundary = UUID.randomUUID().toString();
        
        HttpClient client = HttpClient.newHttpClient();
        
        // Create multipart form data
        String separator = "--" + boundary + "\\r\\n";
        String end = "--" + boundary + "--\\r\\n";
        
        byte[] fileBytes = Files.readAllBytes(file.toPath());
        
        String multipartBody = 
            separator + 
            "Content-Disposition: form-data; name=\\"description\\"\\r\\n\\r\\n" + 
            description + "\\r\\n" +
            separator + 
            "Content-Disposition: form-data; name=\\"file\\"; filename=\\"" + file.getName() + "\\"\\r\\n" +
            "Content-Type: application/octet-stream\\r\\n\\r\\n";
        
        byte[] multipartBodyBytes = multipartBody.getBytes();
        byte[] endBytes = ("\\r\\n" + end).getBytes();
        
        byte[] requestBody = new byte[multipartBodyBytes.length + fileBytes.length + endBytes.length];
        
        System.arraycopy(multipartBodyBytes, 0, requestBody, 0, multipartBodyBytes.length);
        System.arraycopy(fileBytes, 0, requestBody, multipartBodyBytes.length, fileBytes.length);
        System.arraycopy(endBytes, 0, requestBody, multipartBodyBytes.length + fileBytes.length, endBytes.length);
        
        HttpRequest request = HttpRequest.newBuilder()
            .uri(URI.create("https://api.example.com/v1/files/upload"))
            .header("Authorization", "Bearer YOUR_API_KEY")
            .header("Content-Type", "multipart/form-data; boundary=" + boundary)
            .POST(HttpRequest.BodyPublishers.ofByteArray(requestBody))
            .build();
            
        HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());
        
        if (response.statusCode() != 200) {
            throw new Exception("Upload failed: " + response.statusCode());
        }
        
        return response.body();
    }
}
`,
        },
      },
      {
        question: 'How do I implement pagination with the API?',
        answer:
          "Our API uses cursor-based pagination for efficient results handling. Use the 'next_cursor' from the response to fetch the next page of results.",
        examples: {
          javascript: `
// Pagination example
async function fetchAllItems() {
  let allItems = [];
  let nextCursor = null;
  
  do {
    // Build URL with cursor if available
    let url = 'https://api.example.com/v1/items?limit=100';
    if (nextCursor) {
      url += \`&cursor=\${nextCursor}\`;
    }
    
    const response = await fetch(url, {
      headers: {
        'Authorization': 'Bearer YOUR_API_KEY'
      }
    });
    
    const data = await response.json();
    
    // Add results to our collection
    allItems = [...allItems, ...data.items];
    
    // Update cursor for next request
    nextCursor = data.next_cursor;
    
    // Continue until there's no next cursor
  } while (nextCursor);
  
  return allItems;
}
`,
          typescript: `
// Pagination with TypeScript
interface PaginatedResponse<T> {
  items: T[];
  next_cursor: string | null;
  total_count: number;
}

interface Item {
  id: string;
  name: string;
  created_at: string;
}

async function fetchAllItems(): Promise<Item[]> {
  let allItems: Item[] = [];
  let nextCursor: string | null = null;
  
  do {
    let url = 'https://api.example.com/v1/items?limit=100';
    if (nextCursor) {
      url += \`&cursor=\${nextCursor}\`;
    }
    
    const response = await fetch(url, {
      headers: {
        'Authorization': 'Bearer YOUR_API_KEY'
      }
    });
    
    const data = await response.json() as PaginatedResponse<Item>;
    
    allItems = [...allItems, ...data.items];
    nextCursor = data.next_cursor;
    
  } while (nextCursor);
  
  return allItems;
}
`,
          python: `
# Pagination in Python
import requests

def fetch_all_items():
    all_items = []
    next_cursor = None
    
    while True:
        # Build URL with cursor if available
        url = 'https://api.example.com/v1/items?limit=100'
        if next_cursor:
            url += f'&cursor={next_cursor}'
        
        headers = {
            'Authorization': 'Bearer YOUR_API_KEY'
        }
        
        response = requests.get(url, headers=headers)
        
        if response.status_code != 200:
            raise Exception(f"Failed to fetch items: {response.status_code}")
        
        data = response.json()
        
        # Add results to our collection
        all_items.extend(data['items'])
        
        # Update cursor for next request
        next_cursor = data.get('next_cursor')
        
        # Break if no more pages
        if not next_cursor:
            break
    
    return all_items
`,
          java: `
// Pagination in Java
import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;
import java.util.ArrayList;
import java.util.List;
import org.json.JSONArray;
import org.json.JSONObject;

public class PaginatedFetcher {
    public static List<JSONObject> fetchAllItems() throws Exception {
        List<JSONObject> allItems = new ArrayList<>();
        String nextCursor = null;
        
        HttpClient client = HttpClient.newHttpClient();
        
        do {
            // Build URL with cursor if available
            String url = "https://api.example.com/v1/items?limit=100";
            if (nextCursor != null) {
                url += "&cursor=" + nextCursor;
            }
            
            HttpRequest request = HttpRequest.newBuilder()
                .uri(URI.create(url))
                .header("Authorization", "Bearer YOUR_API_KEY")
                .GET()
                .build();
                
            HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());
            
            if (response.statusCode() != 200) {
                throw new Exception("Failed to fetch items: " + response.statusCode());
            }
            
            JSONObject data = new JSONObject(response.body());
            JSONArray items = data.getJSONArray("items");
            
            // Add items to our collection
            for (int i = 0; i < items.length(); i++) {
                allItems.add(items.getJSONObject(i));
            }
            
            // Update cursor for next request
            nextCursor = data.has("next_cursor") ? data.getString("next_cursor") : null;
            
        } while (nextCursor != null);
        
        return allItems;
    }
}
`,
        },
      },
    ],
  },
  {
    category: 'Error Handling',
    items: [
      {
        question: 'How should I handle API errors?',
        answer:
          'All API errors return appropriate HTTP status codes and a JSON response body with error details. Your code should check for non-200 status codes and handle errors accordingly.',
        examples: {
          javascript: `
// Error handling example
async function makeApiRequest(endpoint) {
  try {
    const response = await fetch(\`https://api.example.com/v1/\${endpoint}\`, {
      headers: {
        'Authorization': 'Bearer YOUR_API_KEY'
      }
    });
    
    const data = await response.json();
    
    if (!response.ok) {
      // Handle API errors with error info from the response
      console.error(\`API Error: \${data.error.code} - \${data.error.message}\`);
      throw new Error(data.error.message);
    }
    
    return data;
  } catch (error) {
    // Handle network errors or JSON parsing errors
    console.error('Request failed:', error);
    throw error;
  }
}
`,
          typescript: `
// Error handling with TypeScript
interface ApiError {
  error: {
    code: string;
    message: string;
    details?: any;
  }
}

interface ApiResponse<T> {
  success: boolean;
  data: T;
}

class ApiRequestError extends Error {
  code: string;
  details?: any;
  
  constructor(code: string, message: string, details?: any) {
    super(message);
    this.code = code;
    this.details = details;
  }
}

async function makeApiRequest<T>(endpoint: string): Promise<T> {
  try {
    const response = await fetch(\`https://api.example.com/v1/\${endpoint}\`, {
      headers: {
        'Authorization': 'Bearer YOUR_API_KEY'
      }
    });
    
    const responseData = await response.json();
    
    if (!response.ok) {
      const errorData = responseData as ApiError;
      throw new ApiRequestError(
        errorData.error.code,
        errorData.error.message,
        errorData.error.details
      );
    }
    
    return responseData as T;
  } catch (error) {
    if (error instanceof ApiRequestError) {
      // Handle API errors
      console.error(\`API Error: \${error.code} - \${error.message}\`);
    } else {
      // Handle network errors or JSON parsing errors
      console.error('Request failed:', error);
    }
    throw error;
  }
}
`,
          python: `
# Error handling in Python
import requests

class ApiError(Exception):
    def __init__(self, code, message, details=None):
        self.code = code
        self.message = message
        self.details = details
        super().__init__(f"{code}: {message}")

def make_api_request(endpoint):
    url = f'https://api.example.com/v1/{endpoint}'
    
    headers = {
        'Authorization': 'Bearer YOUR_API_KEY'
    }
    
    try:
        response = requests.get(url, headers=headers)
        response.raise_for_status()  # Raise exception for 4XX/5XX responses
        return response.json()
    except requests.exceptions.HTTPError as e:
        # Handle API errors
        try:
            error_data = response.json()
            raise ApiError(
                error_data['error']['code'],
                error_data['error']['message'],
                error_data['error'].get('details')
            )
        except (ValueError, KeyError):
            # Couldn't parse error JSON
            raise ApiError('unknown_error', str(e))
    except requests.exceptions.RequestException as e:
        # Handle network errors
        raise ApiError('network_error', str(e))
`,
          java: `
// Error handling in Java
import java.io.IOException;
import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;
import org.json.JSONObject;

class ApiError extends Exception {
    private String code;
    private Object details;
    
    public ApiError(String code, String message, Object details) {
        super(message);
        this.code = code;
        this.details = details;
    }
    
    public String getCode() {
        return code;
    }
    
    public Object getDetails() {
        return details;
    }
}

public class ApiClient {
    public static JSONObject makeApiRequest(String endpoint) throws Exception {
        HttpClient client = HttpClient.newHttpClient();
        
        HttpRequest request = HttpRequest.newBuilder()
            .uri(URI.create("https://api.example.com/v1/" + endpoint))
            .header("Authorization", "Bearer YOUR_API_KEY")
            .GET()
            .build();
            
        try {
            HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());
            
            JSONObject responseData = new JSONObject(response.body());
            
            if (response.statusCode() < 200 || response.statusCode() >= 300) {
                // Handle API errors
                JSONObject error = responseData.getJSONObject("error");
                throw new ApiError(
                    error.getString("code"),
                    error.getString("message"),
                    error.has("details") ? error.get("details") : null
                );
            }
            
            return responseData;
        } catch (IOException e) {
            // Handle network errors
            throw new ApiError("network_error", "Network error occurred: " + e.getMessage(), null);
        } catch (InterruptedException e) {
            Thread.currentThread().interrupt();
            throw new ApiError("request_interrupted", "Request was interrupted", null);
        } catch (Exception e) {
            if (e instanceof ApiError) {
                throw e;
            }
            // Handle other errors
            throw new ApiError("unknown_error", "Unknown error: " + e.getMessage(), null);
        }
    }
}
`,
        },
      },
    ],
  },
];

export default function CodeSnippets() {
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedLanguage, setSelectedLanguage] =
    useState<LanguageId>('javascript');
  const [copiedSnippet, setCopiedSnippet] = useState<string | null>(null);

  // Filter FAQs based on search query
  const filteredFaqs =
    searchQuery.trim() === ''
      ? faqs
      : faqs
          .map((category) => ({
            ...category,
            items: category.items.filter(
              (item) =>
                item.question
                  .toLowerCase()
                  .includes(searchQuery.toLowerCase()) ||
                item.answer.toLowerCase().includes(searchQuery.toLowerCase())
            ),
          }))
          .filter((category) => category.items.length > 0);

  const copyToClipboard = (text: string, snippetId: string) => {
    navigator.clipboard.writeText(text.trim());
    setCopiedSnippet(snippetId);
    setTimeout(() => setCopiedSnippet(null), 2000);
  };

  return (
    <div className="container mx-auto max-w-[85rem] px-4 py-24 md:px-6 lg:py-32 2xl:max-w-[1400px]">
      {/* Title */}
      <div className="mx-auto mb-10 max-w-2xl text-center lg:mb-14">
        <h2 className="text-2xl font-bold md:text-4xl md:leading-tight">
          Developer Documentation
        </h2>
        <p className="text-muted-foreground mt-4">
          Technical FAQ and code examples for developers
        </p>
      </div>
      {/* End Title */}

      {/* Search and Language Selection */}
      <div className="mx-auto mb-10 flex max-w-5xl flex-col gap-4 md:flex-row">
        {/* Search Input */}
        <div className="relative w-full md:w-[55%]">
          <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
          <Input
            placeholder="Search documentation..."
            className="pl-10"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>

        {/* Language Tabs (desktop) / Dropdown (mobile) */}
        <div className="w-full md:w-[45%]">
          {/* Tabs for larger screens */}
          <div className="hidden md:block">
            <Tabs
              value={selectedLanguage}
              onValueChange={(value) =>
                setSelectedLanguage(value as LanguageId)
              }
              className="w-full"
            >
              <TabsList className="grid w-full grid-cols-4">
                {languageTabs.map((tab) => (
                  <TabsTrigger key={tab.id} value={tab.id}>
                    {tab.label}
                  </TabsTrigger>
                ))}
              </TabsList>
            </Tabs>
          </div>

          {/* Dropdown for mobile */}
          <div className="md:hidden">
            <Select
              value={selectedLanguage}
              onValueChange={(value) =>
                setSelectedLanguage(value as LanguageId)
              }
            >
              <SelectTrigger className="w-full">
                <SelectValue placeholder="Select language" />
              </SelectTrigger>
              <SelectContent>
                {languageTabs.map((tab) => (
                  <SelectItem key={tab.id} value={tab.id}>
                    {tab.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>
      </div>

      {/* FAQ Container */}
      <div className="mx-auto max-w-5xl">
        {filteredFaqs.length > 0 ? (
          filteredFaqs.map((category, categoryIndex) => (
            <div key={categoryIndex} className="py-8 first:pt-0 last:pb-0">
              <h3 className="mb-6 text-xl font-semibold">
                {category.category}
              </h3>

              <Accordion type="single" collapsible className="w-full">
                {category.items.map((item, itemIndex) => {
                  const snippetId = `${category.category}-${itemIndex}`;
                  const codeSnippet = item.examples[selectedLanguage] || '';
                  const isSnippetCopied = copiedSnippet === snippetId;

                  return (
                    <AccordionItem
                      key={itemIndex}
                      value={`${categoryIndex}-${itemIndex}`}
                      className="border-b"
                    >
                      <AccordionTrigger className="py-4 text-left hover:no-underline">
                        <span className="text-base font-medium">
                          {item.question}
                        </span>
                      </AccordionTrigger>
                      <AccordionContent className="pb-6">
                        <div className="text-muted-foreground mb-4">
                          {item.answer}
                        </div>

                        {/* Code Snippet */}
                        <div className="bg-muted overflow-hidden rounded-md">
                          <div className="bg-muted flex items-center justify-between border-b p-3">
                            <div className="font-mono text-sm">
                              Example (
                              {
                                languageTabs.find(
                                  (l) => l.id === selectedLanguage
                                )?.label
                              }
                              )
                            </div>
                            <Button
                              variant="ghost"
                              size="sm"
                              className="h-8 gap-1 text-xs"
                              onClick={() =>
                                copyToClipboard(codeSnippet, snippetId)
                              }
                            >
                              {isSnippetCopied ? (
                                <>
                                  <Check className="h-3.5 w-3.5" />
                                  <span>Copied!</span>
                                </>
                              ) : (
                                <>
                                  <Copy className="h-3.5 w-3.5" />
                                  <span>Copy</span>
                                </>
                              )}
                            </Button>
                          </div>
                          <div className="overflow-x-auto p-4">
                            <pre className="text-foreground font-mono text-sm">
                              <code>{codeSnippet}</code>
                            </pre>
                          </div>
                        </div>
                      </AccordionContent>
                    </AccordionItem>
                  );
                })}
              </Accordion>
            </div>
          ))
        ) : (
          <div className="py-16 text-center">
            <p className="text-muted-foreground">
              No results found for &quot;{searchQuery}&quot;. Try a different
              search term.
            </p>
          </div>
        )}
      </div>
    </div>
  );
}

About this block

Code Snippets is a developer documentation FAQ. A centered heading and subtitle sit at the top, followed by a toolbar row that holds a live search field on the left and a four-tab language picker on the right (JavaScript, TypeScript, Python, Java). On mobile the tabs collapse into a dropdown. Below the toolbar, questions are grouped under named category headings. Each group uses an accordion so answers stay hidden until a reader opens them. Inside every expanded answer sits a prose explanation and then a code panel: a header bar names the active language and provides a one-click copy button that briefly shows a checkmark on success, and a scrollable monospace block below shows the snippet for that language.

The categories, questions, answers, and code examples are all plain data, so you can add or remove groups and items freely. Switching languages swaps every snippet on the page at once, so adding a new language tab only requires a new entry in the language list and matching examples on each item. The search field filters across both question text and answer prose, and the empty state message can be reworded to match your product tone.

When to use

Reach for this block when your product ships an API and you need a help page that shows working code alongside plain-language answers. It suits a dedicated developer docs route, a payment integration guide, or a security reference page where engineers need to see exact request shapes for authentication, token refresh, or error handling patterns. Compared to a plain accordion FAQ, the language switcher and copy button reduce the friction of moving from reading to implementing, which matters when your audience is writing integration code against a fintech or banking API.

A natural flow around it on a Marketing (Legacy) page:

Before

A hero section to introduce the product and establish context before diving into technical detail
Feature sections that describe what the API does so readers arrive at the docs already oriented

After

A contact section so developers can reach support when the docs do not answer their question
A CTA section with a link to sign up for API access once a reader has seen the integration patterns

What you can customize

The block supports three independent axes of customization:

Language tabs. Add or remove programming languages by updating the tab list and supplying matching code strings on each FAQ item; every snippet in every answer updates in sync.
Category groups. Questions are organized into named sections that render with their own heading, so you can reflect your API surface area by grouping items under headings like Webhooks, Rate Limits, or SDKs.
Copy and empty state. The heading, subtitle, search placeholder, and the no-results message are all plain strings you can reword without touching the interaction logic.

Tip: keep each code example self-contained and runnable so a developer can paste it directly into their project without editing imports.

About this block

When to use

A natural flow around it on a Marketing (Legacy) page:

Before

A hero section to introduce the product and establish context before diving into technical detail
Feature sections that describe what the API does so readers arrive at the docs already oriented

After

A contact section so developers can reach support when the docs do not answer their question
A CTA section with a link to sign up for API access once a reader has seen the integration patterns

What you can customize

The block supports three independent axes of customization:

Language tabs. Add or remove programming languages by updating the tab list and supplying matching code strings on each FAQ item; every snippet in every answer updates in sync.
Category groups. Questions are organized into named sections that render with their own heading, so you can reflect your API surface area by grouping items under headings like Webhooks, Rate Limits, or SDKs.
Copy and empty state. The heading, subtitle, search placeholder, and the no-results message are all plain strings you can reword without touching the interaction logic.

Tip: keep each code example self-contained and runnable so a developer can paste it directly into their project without editing imports.

Code Snippets

About this block

When to use

What you can customize

Search Shadcn UI Blocks

About this block

When to use

What you can customize