Code Groups

Code Groups let you show multiple related code files together, perfect for showing different files in a project or different versions of the same code.

Basic Code Group

dart

void main() {
runApp(MyApp());
}

yaml

name: my_app
dependencies:
flutter:
  sdk: flutter

markdown

<CodeGroup>
  <Code title="main.dart" language="dart">
void main() {
  runApp(MyApp());
}
  </Code>
  <Code title="pubspec.yaml" language="yaml">
name: my_app
dependencies:
  flutter:
    sdk: flutter
  </Code>
</CodeGroup>

Synced Code Groups

Like Tabs, a CodeGroup accepts a group attribute. Groups sharing a name switch together and remember the choice across pages, matched by the Code block's title:

markdown

<CodeGroup group="pkg-manager">
  <Code title="npm">npm install my-package</Code>
  <Code title="pnpm">pnpm add my-package</Code>
</CodeGroup>

Project Structure Example

Show how files work together:

dart

import 'package:flutter/material.dart';
import 'app.dart';

void main() {
runApp(const MyApp());
}

dart

import 'package:flutter/material.dart';
import 'home_page.dart';

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'My App',
    home: const HomePage(),
  );
}
}

dart

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
const HomePage({super.key});

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Home')),
    body: const Center(child: Text('Hello!')),
  );
}
}

Configuration Files

yaml

name: My Docs
description: Documentation for My Project

nav:
- label: Docs
  href: /

sidebar:
- group: Getting Started
  pages:
    - index
    - installation

json

{
"name": "my-docs",
"scripts": {
  "dev": "stardust dev",
  "build": "stardust build"
}
}

API Request/Response

bash

curl -X POST https://api.example.com/users \
-H "Content-Type: application/json" \
-d '{"name": "John", "email": "john@example.com"}'

json

{
"id": "usr_123",
"name": "John",
"email": "john@example.com",
"created_at": "2024-01-15T10:30:00Z"
}

Before/After Example

dart

// Old approach - manual state management
class Counter {
int _value = 0;

void increment() {
  _value++;
  notifyListeners();
}
}

dart

// New approach - using Riverpod
final counterProvider = StateProvider<int>((ref) => 0);

// In widget
ref.read(counterProvider.notifier).state++;

Supported Languages

Code Groups support all the same languages as regular code blocks:

dart, javascript, typescript, python, go, rust
java, kotlin, swift, c, cpp, csharp
ruby, php, sql, graphql
yaml, json, toml, xml
bash, shell, powershell
html, css, scss
And many more...

Code Groups vs Tabs

Info

Use Code Groups when showing related files that work together.

Use Tabs when showing alternative implementations (different languages doing the same thing).

Code Groups - Multiple files in one project:

html

<div id="app"></div>

css

#app { padding: 20px; }

Tabs - Same thing in different languages:

javascript

console.log('Hello');

python

print('Hello')