> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Shiny

export const GraphEmbed = ({src, story, aspectRatio, borderRadius = '14px', args}) => {
  const STORYBOOK_BASE_URL = typeof window !== 'undefined' && window.location.hostname === 'localhost' ? 'http://localhost:6006' : 'https://storybook-sdk.vercel.app';
  function buildArgsString(args) {
    if (!args) return '';
    const encodeValue = value => {
      if (value === null) return '!null';
      if (value === undefined) return '!undefined';
      if (typeof value === 'boolean') return `!${value}`;
      if (typeof value === 'number') return String(value);
      return encodeURIComponent(String(value));
    };
    const properties = Object.entries(args).map(([key, value]) => `${key}:${encodeValue(value)}`).join(';');
    return `&args=${properties}`;
  }
  const resolvedSrc = story ? `${STORYBOOK_BASE_URL}/iframe.html?id=${story}&viewMode=story&embed=1&globals=mode:readonly${buildArgsString(args)}` : src;
  const resolvedAspectRatio = aspectRatio ?? (story ? '16 / 9' : '10 / 6');
  return <iframe src={resolvedSrc} loading="lazy" allowfullscreen="true" style={{
    width: '100%',
    aspectRatio: resolvedAspectRatio,
    border: 'none',
    borderRadius,
    colorScheme: 'light'
  }} />;
};

Shiny draws graphs on a dark card scattered with faint stars, inside a holographic foil border: every shape is one clean flat color, slices and stacked bars are parted by a hairline of the card, and lines carry a soft glow.

<Warning>
  Shiny ships as its own package, `@graphysdk/theme-shiny`, still on `0.x`. A
  minor release may change its look, so pin a caret range (`^0.1.0`) to take
  only patches. Tell us what works and what doesn't on
  [Discord](https://discord.gg/yGmYCjkSr).
</Warning>

<GraphEmbed story="themes-shiny--chart" args={{ chart: 'bar' }} aspectRatio="4 / 3" borderRadius="0" />

## Install

```bash theme={null}
npm install @graphysdk/theme-shiny
```

Its peer dependencies are `@graphysdk/react` and React 19. Pass the theme to `createGraphyKit` and import its fonts once:

```tsx theme={null}
import { createGraphyKit, GraphRenderer } from '@graphysdk/react';
import { shiny } from '@graphysdk/theme-shiny';
import '@graphysdk/theme-shiny/fonts.css';

const kit = createGraphyKit({ theme: shiny });
```

Every graph drawn through `kit.GraphProvider` takes the theme. The spec is written as usual and names no theme:

```tsx theme={null}
const spec = kit.pipe(
  kit.createSpec({ x: 'quarter', y: 'revenue', color: 'region' }),
  kit.geom.bar({ position: 'dodge' }),
  kit.scale.x(),
  kit.scale.y()
);

<kit.GraphProvider spec={spec} data={data}>
  <GraphRenderer />
</kit.GraphProvider>;
```

Without a kit, pass the theme to the provider instead: `<GraphProvider theme={shiny}>`.

The provider reads the theme once, when it mounts. To switch themes, remount the provider, for example with a React `key`.

## What the theme decides

| Part | What Shiny sets |
| - | - |
| Stylesheet | A dark starred card with rounded corners inside a holographic foil border, a faint grid for the values over one baseline, headings in Inter Tight and small type in JetBrains Mono, notes set in terminal windows |
| Colors | Pulse pink, Sirius cyan, Lagoon violet, Nebula, a mint and Starlight for groups, and a ramp from a deep violet through Pulse to a pale blush |
| Config | None |
| Geoms | Every built-in geom repainted as flat shapes parted by a hairline of the card; lines glow softly; a hovered shape takes a bright line inside its edge |
| Color scheme | Dark, whatever `colorScheme` the provider is given |

<GraphEmbed story="themes-shiny--chart" args={{ chart: 'line' }} aspectRatio="4 / 3" borderRadius="0" />

## The border

The foil is the theme's one holographic part: a band of lilac, pink, cyan and mint round the card's edge, with a fine diamond plate and streaks of light across it. Nothing inside the card is holographic, so shapes keep their own colors, a slice its angle and a bar its value.

## Changing the look of one graph

A spec's own `styles()`, scales and `config()` sit above the theme. This graph keeps the card and the border and draws its groups in Pulse and Sirius only:

```tsx theme={null}
kit.pipe(spec, kit.scale.color.discrete({ range: ['#E94FF3', '#9AF2FF'] }));
```

The theme is drawn for a graph about 600 pixels wide. `style.graph({ textScale })` scales its type for a larger or smaller one.

## With a geom package

Shiny repaints the built-in geoms only. A geom from a package, such as the [dumbbell](/sdk-next/graph-types/dumbbell), keeps its own shapes and is drawn on the card in the theme's colors and type.

```tsx theme={null}
import { dumbbell } from '@graphysdk/geom-dumbbell';

const kit = createGraphyKit({ theme: shiny, plugins: [dumbbell] });
```

## Fonts

`fonts.css` loads Inter Tight, in weights 500, 700 and 800, and JetBrains Mono, in weights 400, 500, 600 and 700, from Google Fonts. To host the fonts yourself, leave the import out and load families named `Inter Tight` and `JetBrains Mono` before the first graph is drawn.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.