Nasal Pathway Melodrama

    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 an ImagesBlock that you can integrate into any page, as well as a standalone ImagesPage

    Getting Started


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

    Add to a document

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

    in mystory.stories.tsx

    import { Document } from '@component-controls/core';
    import main_screen from './media/main-screen.jpg';
    export default {
      title: 'MyStory',
      plugins: {
        images: {
          title: 'Screen design',
          items: [main_screen],
    } as Document;

    Add to a story

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

    in mystory.stories.tsx

    import React from 'react';
    import { Document, Example } from '@component-controls/core';
    import main_screen from './media/main-screen.jpg';
    export default {
      title: 'MyStory',
    } as Document;
    export const story: Example = () => <Button>click me</Button>; = {
      plugins: {
        images: [main_screen],

    Insert into an MDX document

    in mystory.mdx

    title: MyStory
    import { ImagesBlock } from '@component-controls/addon-images';
    import login_screen from './media/login-screen.jpg';
    import logout_screen from './media/logout-screen.jpg';
      items={[login_screen, logout_screen]}

    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: {
        images: {
          title: 'Screenshots'
    export default config;



    ImagesBlock source code


    Name Type Description
    items (string | { [key: string]: any; src: 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-images@3.15.0





    Unpacked Size

    242 kB

    Total Files


    Last publish


    • atanasster