TypeScript icon, indicating that this package has built-in type declarations

    3.15.0 • Public • Published

    Table of contents

    In action

    Example site


    This addon contains a NotesBlock that you can integrate into any page, as well as a standalone NotesPage

    Getting Started


    yarn add@component-controls/addon-notes --dev

    Add to a document

    The notes will be assigned to all the stories in the current document

    in mystory.stories.tsx

    import { Document } from '@component-controls/core';
    import design_notes from './design-assets/design-notes.md';;
    export default {
      title: 'MyStory',
      plugins: {
        notes: {
          title: 'Design brief',
          items: [design_notes],
    } as Document;

    Add to a story

    The notes will be assigned only to a specific story. This allows multiple stories in the document to have different notes associated with them.

    in mystory.stories.tsx

    import React from 'react';
    import { Document, Example } from '@component-controls/core';
    export default {
      title: 'MyStory',
    } as Document;
    export const story: Example = () => <Button>click me</Button>;
    story.design = {
      plugins: {
        notes: [
          # Introduction
          some **markdown**

    Insert into an MDX document

    in mystory.mdx

    title: MyStory
    import { NotesBlock } from '@component-controls/addon-notes';
    # Introduction
    some **markdown**

    Configure props globally

    You can globally change the default options of the NotesBlock component

    in .config/runtime.tsx

    import { RuntimeConfiguration } from "@component-controls/core";
    const config: RuntimeConfiguration = {
      components: {
        notes: {
          title: 'Design files'
    export default config;



    NotesBlock source code


    Name Type Description
    items (string | { [key: string]: any; text: string; })[]
    title string optional section title for the block.
    description string optional markdown description.
    id string optional id to be used for the block if no id is provided, one will be calculated automatically from the title.
    collapsible boolean if false, will nothave a collapsible frame.
    data-testid string testing id
    plain boolean inner container variant or plain
    sx ThemeUIStyleObject
    ref ((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>
    name string


    npm i @component-controls/addon-notes@3.15.0





    Unpacked Size

    226 kB

    Total Files


    Last publish


    • atanasster