Skip to main content
Version: Next

Extension Components

These UI components are available to Superset extension developers through the @apache-superset/core/ui package. They provide a consistent look and feel with the rest of Superset and are designed to be used in extension panels, views, and other UI elements.

Available Components​

Usage​

All components are exported from the @apache-superset/core/ui package:

import { Alert } from '@apache-superset/core/ui';

export function MyExtensionPanel() {
  return (
    <Alert type="info">
      Welcome to my extension!
    </Alert>
  );
}

Adding New Components​

Components in @apache-superset/core/ui are automatically documented here. To add a new extension component:

  1. Add the component to superset-frontend/packages/superset-core/src/ui/components/
  2. Export it from superset-frontend/packages/superset-core/src/ui/components/index.ts
  3. Create a Storybook story with an Interactive export:
export default {
  title: 'Extension Components/MyComponent',
  component: MyComponent,
  parameters: {
    docs: {
      description: {
        component: 'Description of the component...',
      },
    },
  },
};

export const InteractiveMyComponent = (args) => <MyComponent {...args} />;

InteractiveMyComponent.args = {
  variant: 'primary',
  disabled: false,
};

InteractiveMyComponent.argTypes = {
  variant: {
    control: { type: 'select' },
    options: ['primary', 'secondary'],
  },
  disabled: {
    control: { type: 'boolean' },
  },
};
  1. Run yarn start in docs/ - the page generates automatically!

Interactive Documentation​

For interactive examples with controls, visit the Storybook.