Fix edit dataset

Signed-off-by: hainenber <dotronghai96@gmail.com>
Co-authored-by: Evan Rusackas <evan@preset.io>

.asf.yaml

@@ -24,7 +24,9 @@ notifications:
   discussions: notifications@superset.apache.org
 
 github:
-  del_branch_on_merge: true
+  pull_requests:
+    del_branch_on_merge: true
+    allow_update_branch: true
   description: "Apache Superset is a Data Visualization and Data Exploration Platform"
   homepage: https://superset.apache.org/
   labels:

.devcontainer/devcontainer.json

@@ -13,7 +13,7 @@
 
   "features": {
     "ghcr.io/devcontainers/features/docker-in-docker:2": {
-      "moby": true,
+      "moby": false,
       "dockerDashComposeVersion": "v2"
     },
     "ghcr.io/devcontainers/features/node:1": {

.github/dependabot.yml

@@ -16,9 +16,12 @@ updates:
         update-types: ["version-update:semver-major", "version-update:semver-minor"]
       - dependency-name: "eslint-plugin-storybook"
       - dependency-name: "react-error-boundary"
+      - dependency-name: "@rjsf/*"
       # remark-gfm v4+ requires react-markdown v9+, which needs React 18
       - dependency-name: "remark-gfm"
       - dependency-name: "react-markdown"
+      # TODO: remove below entries until React >= 19.0.0
+      - dependency-name: "react-icons"
       # JSDOM v30 doesn't play well with Jest v30
       # Source: https://jestjs.io/blog#known-issues
       # GH thread: https://github.com/jsdom/jsdom/issues/3492
@@ -27,6 +30,9 @@ updates:
       # See https://github.com/apache/superset/pull/37384#issuecomment-3793991389
       # TODO: remove the plugin once Lodash usage has been migrated to a more readily tree-shakeable alternative
       - dependency-name: "@swc/plugin-transform-imports"
+      # `just-handlerbars-helpers` library in plugin-chart-handlebars requires `currencyformatter`` to be < 2
+      - dependency-name: "currencyformatter.js"
+        update-types: ["version-update:semver-major"]
     groups:
       storybook:
         applies-to: version-updates
@@ -65,6 +71,22 @@ updates:
 
   - package-ecosystem: "npm"
     directory: "/docs/"
+    ignore:
+      # TODO: remove below entries until React >= 18.0.0 in superset-frontend
+      - dependency-name: "storybook"
+        update-types: ["version-update:semver-major", "version-update:semver-minor"]
+      - dependency-name: "@storybook*"
+        update-types: ["version-update:semver-major", "version-update:semver-minor"]
+      - dependency-name: "eslint-plugin-storybook"
+      - dependency-name: "react-error-boundary"
+    groups:
+      storybook:
+        applies-to: version-updates
+        patterns:
+          - "@storybook*"
+          - "storybook"
+        update-types:
+          - "patch"
     schedule:
       interval: "daily"
     open-pull-requests-limit: 10
@@ -123,6 +145,9 @@ updates:
 
   - package-ecosystem: "npm"
     directory: "/superset-frontend/plugins/plugin-chart-pivot-table/"
+    ignore:
+      # TODO: remove below entries until React >= 19.0.0
+      - dependency-name: "react-icons"
     schedule:
       interval: "daily"
     labels:
@@ -173,6 +198,9 @@ updates:
 
   - package-ecosystem: "npm"
     directory: "/superset-frontend/plugins/plugin-chart-table/"
+    ignore:
+      # TODO: remove below entries until React >= 19.0.0
+      - dependency-name: "react-icons"
     schedule:
       interval: "daily"
     labels:
@@ -273,6 +301,10 @@ updates:
 
   - package-ecosystem: "npm"
     directory: "/superset-frontend/plugins/plugin-chart-handlebars/"
+    ignore:
+      # `just-handlerbars-helpers` library in plugin-chart-handlebars requires `currencyformatter`` to be < 2
+      - dependency-name: "currencyformatter.js"
+        update-types: ["version-update:semver-major"]
     schedule:
       interval: "daily"
     labels:

.github/workflows/docker.yml

@@ -104,7 +104,7 @@ jobs:
       # Scan for vulnerabilities in built container image after pushes to mainline branch.
       - name: Run Trivy container image vulnerabity scan
         if: github.event_name == 'push' && github.ref == 'refs/heads/master' && (steps.check.outputs.python || steps.check.outputs.frontend || steps.check.outputs.docker) && matrix.build_preset == 'lean'
-        uses: aquasecurity/trivy-action@b6643a29fecd7f34b3597bc6acb0a98b03d33ff8 # v0.33.1
+        uses: aquasecurity/trivy-action@57a97c7e7821a5776cebc9bb87c984fa69cba8f1 # v0.35.0
         with:
           image-ref: ${{ env.IMAGE_TAG }}
           format: 'sarif'

.github/workflows/no-hold-label.yml

@@ -4,6 +4,9 @@ on:
   pull_request:
     types: [labeled, unlabeled, opened, reopened, synchronize]
 
+permissions:
+  pull-requests: read
+
 # cancel previous workflow jobs for PRs
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.run_id }}

.github/workflows/pre-commit.yml

@@ -8,6 +8,9 @@ on:
   pull_request:
     types: [synchronize, opened, reopened, ready_for_review]
 
+permissions:
+  contents: read
+
 # cancel previous workflow jobs for PRs
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.run_id }}
@@ -61,11 +64,17 @@ jobs:
           restore-keys: |
             pre-commit-v2-${{ runner.os }}-py${{ matrix.python-version }}-
 
+      - name: Get changed files
+        id: changed_files
+        uses: ./.github/actions/file-changes-action
+        with:
+          output: ' '
+
       - name: pre-commit
         run: |
           set +e  # Don't exit immediately on failure
-          export SKIP=eslint-frontend,type-checking-frontend
-          pre-commit run --all-files
+          export SKIP=type-checking-frontend
+          pre-commit run --files ${{ steps.changed_files.outputs.files }}
           PRE_COMMIT_EXIT_CODE=$?
           git diff --quiet --exit-code
           GIT_DIFF_EXIT_CODE=$?

.github/workflows/superset-app-cli.yml

@@ -23,7 +23,7 @@ jobs:
       SUPERSET__SQLALCHEMY_DATABASE_URI: postgresql+psycopg2://superset:superset@127.0.0.1:15432/superset
     services:
       postgres:
-        image: postgres:16-alpine
+        image: postgres:17-alpine
         env:
           POSTGRES_USER: superset
           POSTGRES_PASSWORD: superset

.github/workflows/superset-docs-deploy.yml

@@ -68,7 +68,7 @@ jobs:
           yarn install --check-cache
       - name: Download database diagnostics (if triggered by integration tests)
         if: github.event_name == 'workflow_run' && github.event.workflow_run.conclusion == 'success'
-        uses: dawidd6/action-download-artifact@v14
+        uses: dawidd6/action-download-artifact@v16
         continue-on-error: true
         with:
           workflow: superset-python-integrationtest.yml
@@ -77,7 +77,7 @@ jobs:
           path: docs/src/data/
       - name: Try to download latest diagnostics (for push/dispatch triggers)
         if: github.event_name != 'workflow_run'
-        uses: dawidd6/action-download-artifact@v14
+        uses: dawidd6/action-download-artifact@v16
         continue-on-error: true
         with:
           workflow: superset-python-integrationtest.yml

.github/workflows/superset-docs-verify.yml

@@ -27,7 +27,7 @@ jobs:
       - uses: actions/checkout@v6
       # Do not bump this linkinator-action version without opening
       # an ASF Infra ticket to allow the new version first!
-      - uses: JustinBeckwith/linkinator-action@f62ba0c110a76effb2ee6022cc6ce4ab161085e3  # v2.4
+      - uses: JustinBeckwith/linkinator-action@af984b9f30f63e796ae2ea5be5e07cb587f1bbd9  # v2.3
         continue-on-error: true # This will make the job advisory (non-blocking, no red X)
         with:
           paths: "**/*.md, **/*.mdx"
@@ -111,7 +111,7 @@ jobs:
         run: |
           yarn install --check-cache
       - name: Download database diagnostics from integration tests
-        uses: dawidd6/action-download-artifact@v14
+        uses: dawidd6/action-download-artifact@v16
         with:
           workflow: superset-python-integrationtest.yml
           run_id: ${{ github.event.workflow_run.id }}

.github/workflows/superset-e2e.yml

@@ -54,7 +54,7 @@ jobs:
       USE_DASHBOARD: ${{ github.event.inputs.use_dashboard == 'true' || 'false' }}
     services:
       postgres:
-        image: postgres:16-alpine
+        image: postgres:17-alpine
         env:
           POSTGRES_USER: superset
           POSTGRES_PASSWORD: superset
@@ -146,7 +146,7 @@ jobs:
           SAFE_APP_ROOT=${APP_ROOT//\//_}
           echo "safe_app_root=$SAFE_APP_ROOT" >> $GITHUB_OUTPUT
       - name: Upload Artifacts
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v7
         if: failure()
         with:
           path: ${{ github.workspace }}/superset-frontend/cypress-base/cypress/screenshots
@@ -171,7 +171,7 @@ jobs:
       GITHUB_TOKEN: ${{ github.token }}
     services:
       postgres:
-        image: postgres:16-alpine
+        image: postgres:17-alpine
         env:
           POSTGRES_USER: superset
           POSTGRES_PASSWORD: superset
@@ -259,7 +259,7 @@ jobs:
           SAFE_APP_ROOT=${APP_ROOT//\//_}
           echo "safe_app_root=$SAFE_APP_ROOT" >> $GITHUB_OUTPUT
       - name: Upload Playwright Artifacts
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v7
         if: failure()
         with:
           path: |

.github/workflows/superset-extensions-cli.yml

@@ -58,7 +58,7 @@ jobs:
 
       - name: Upload HTML coverage report
         if: steps.check.outputs.superset-extensions-cli
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v7
         with:
           name: superset-extensions-cli-coverage-html
           path: htmlcov/

.github/workflows/superset-frontend.yml

@@ -58,7 +58,7 @@ jobs:
 
       - name: Upload Docker Image Artifact
         if: steps.check.outputs.frontend
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v7
         with:
           name: docker-image
           path: docker-image.tar.gz
@@ -73,7 +73,7 @@ jobs:
     runs-on: ubuntu-24.04
     steps:
       - name: Download Docker Image Artifact
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v8
         with:
           name: docker-image
 
@@ -87,10 +87,10 @@ jobs:
           -v ${{ github.workspace }}/superset-frontend/coverage:/app/superset-frontend/coverage \
           --rm $TAG \
           bash -c \
-          "npm run test -- --coverage --shard=${{ matrix.shard }}/8 --coverageReporters=json-summary"
+          "npm run test -- --coverage --shard=${{ matrix.shard }}/8 --coverageReporters=json"
 
       - name: Upload Coverage Artifact
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v7
         with:
           name: coverage-artifacts-${{ matrix.shard }}
           path: superset-frontend/coverage
@@ -99,15 +99,29 @@ jobs:
     needs: [sharded-jest-tests]
     if: needs.frontend-build.outputs.should-run == 'true'
     runs-on: ubuntu-24.04
+    permissions:
+      id-token: write
     steps:
+      - name: Checkout Code
+        uses: actions/checkout@v6
+        with:
+          persist-credentials: false
+          fetch-depth: 0
+          ref: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.sha || github.sha }}
+
       - name: Download Coverage Artifacts
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v8
         with:
           pattern: coverage-artifacts-*
           path: coverage/
 
-      - name: Show Files
-        run: find coverage/
+      - name: Reorganize test result reports
+        run: |
+          find coverage/
+          for i in {1..8}; do
+            mv coverage/coverage-artifacts-${i}/coverage-final.json coverage/coverage-shard-${i}.json
+          done
+        shell: bash
 
       - name: Merge Code Coverage
         run: npx nyc merge coverage/ merged-output/coverage-summary.json
@@ -116,8 +130,9 @@ jobs:
         uses: codecov/codecov-action@v5
         with:
           flags: javascript
-          token: ${{ secrets.CODECOV_TOKEN }}
+          use_oidc: true
           verbose: true
+          disable_search: true
           files: merged-output/coverage-summary.json
           slug: apache/superset
 
@@ -127,7 +142,7 @@ jobs:
     runs-on: ubuntu-24.04
     steps:
       - name: Download Docker Image Artifact
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v8
         with:
           name: docker-image
 
@@ -151,7 +166,7 @@ jobs:
     runs-on: ubuntu-24.04
     steps:
       - name: Download Docker Image Artifact
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v8
         with:
           name: docker-image
 
@@ -169,7 +184,7 @@ jobs:
     runs-on: ubuntu-24.04
     steps:
       - name: Download Docker Image Artifact
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v8
         with:
           name: docker-image
 

.github/workflows/superset-playwright.yml

@@ -45,7 +45,7 @@ jobs:
       GITHUB_TOKEN: ${{ github.token }}
     services:
       postgres:
-        image: postgres:16-alpine
+        image: postgres:17-alpine
         env:
           POSTGRES_USER: superset
           POSTGRES_PASSWORD: superset
@@ -133,7 +133,7 @@ jobs:
           SAFE_APP_ROOT=${APP_ROOT//\//_}
           echo "safe_app_root=$SAFE_APP_ROOT" >> $GITHUB_OUTPUT
       - name: Upload Playwright Artifacts
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v7
         if: failure()
         with:
           path: |

.github/workflows/superset-python-integrationtest.yml

@@ -98,7 +98,7 @@ jobs:
           "
       - name: Upload database diagnostics artifact
         if: steps.check.outputs.python
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v7
         with:
           name: database-diagnostics
           path: databases-diagnostics.json
@@ -115,7 +115,7 @@ jobs:
       SUPERSET__SQLALCHEMY_DATABASE_URI: postgresql+psycopg2://superset:superset@127.0.0.1:15432/superset
     services:
       postgres:
-        image: postgres:16-alpine
+        image: postgres:17-alpine
         env:
           POSTGRES_USER: superset
           POSTGRES_PASSWORD: superset

.github/workflows/superset-python-presto-hive.yml

@@ -25,7 +25,7 @@ jobs:
       SUPERSET__SQLALCHEMY_EXAMPLES_URI: presto://localhost:15433/memory/default
     services:
       postgres:
-        image: postgres:16-alpine
+        image: postgres:17-alpine
         env:
           POSTGRES_USER: superset
           POSTGRES_PASSWORD: superset
@@ -94,7 +94,7 @@ jobs:
       UPLOAD_FOLDER: /tmp/.superset/uploads/
     services:
       postgres:
-        image: postgres:16-alpine
+        image: postgres:17-alpine
         env:
           POSTGRES_USER: superset
           POSTGRES_PASSWORD: superset

.github/workflows/superset-python-unittest.yml

@@ -52,6 +52,7 @@ jobs:
           SUPERSET_SECRET_KEY: not-a-secret
         run: |
           pytest --durations-min=0.5 --cov=superset/sql/ ./tests/unit_tests/sql/ --cache-clear --cov-fail-under=100
+          pytest --durations-min=0.5 --cov=superset/semantic_layers/ ./tests/unit_tests/semantic_layers/ --cache-clear --cov-fail-under=100
       - name: Upload code coverage
         uses: codecov/codecov-action@v5
         with:

.github/workflows/tech-debt.yml

@@ -6,6 +6,9 @@ on:
       - master
       - "[0-9].[0-9]*"
 
+permissions:
+  contents: read
+
 jobs:
   config:
     runs-on: ubuntu-24.04

.gitignore

@@ -68,11 +68,11 @@ superset-websocket/config.json
 *.js.map
 node_modules
 npm-debug.log*
+superset/static/*
 superset/static/assets/*
 !superset/static/assets/.gitkeep
 superset/static/uploads/*
 !superset/static/uploads/.gitkeep
-superset/static/version_info.json
 yarn-error.log
 *.map
 *.min.js

.pre-commit-config.yaml

@@ -83,7 +83,7 @@ repos:
         files: ^superset-frontend/.*\.(js|jsx|ts|tsx)$
       - id: eslint-docs
         name: eslint (docs)
-        entry: bash -c 'cd docs && FILES=$(echo "$@" | sed "s|docs/||g") && yarn eslint --fix --quiet $FILES'
+        entry: bash -c 'cd docs && FILES=$(printf "%s\n" "$@" | sed "s|^docs/||" | tr "\n" " ") && yarn eslint --fix --quiet $FILES'
         language: system
         pass_filenames: true
         files: ^docs/.*\.(js|jsx|ts|tsx)$

README.md

@@ -48,12 +48,16 @@ under the License.
 
 A modern, enterprise-ready business intelligence web application.
 
+### Documentation
+
+- **[User Guide](https://superset.apache.org/user-docs/)** — For analysts and business users. Explore data, build charts, create dashboards, and connect databases.
+- **[Administrator Guide](https://superset.apache.org/admin-docs/)** — Install, configure, and operate Superset. Covers security, scaling, and database drivers.
+- **[Developer Guide](https://superset.apache.org/developer-docs/)** — Contribute to Superset or build on its REST API and extension framework.
+
 [**Why Superset?**](#why-superset) |
 [**Supported Databases**](#supported-databases) |
-[**Installation and Configuration**](#installation-and-configuration) |
 [**Release Notes**](https://github.com/apache/superset/blob/master/RELEASING/README.md#release-notes-for-recent-releases) |
 [**Get Involved**](#get-involved) |
-[**Contributor Guide**](#contributor-guide) |
 [**Resources**](#resources) |
 [**Organizations Using Superset**](https://superset.apache.org/inTheWild)
 
@@ -191,7 +195,7 @@ Try out Superset's [quickstart](https://superset.apache.org/docs/quickstart/) gu
 ## Contributor Guide
 
 Interested in contributing? Check out our
-[Developer Portal](https://superset.apache.org/developer_portal/)
+[Developer Guide](https://superset.apache.org/developer-docs/)
 to find resources around contributing along with a detailed guide on
 how to set up a development environment.
 

RESOURCES/INTHEWILD.yaml

@@ -625,6 +625,9 @@ categories:
     - name: Stockarea
       url: https://stockarea.io
 
+    - name: VTG
+      url: https://www.vtg.de
+
   Sports:
     - name: Club 25 de Agosto (Femenino / Women's Team)
       url: https://www.instagram.com/25deagosto.basketfemenino/

UPDATING.md

@@ -24,19 +24,67 @@ assists people when migrating to a new version.
 
 ## Next
 
-### Signal Cache Backend
+### Combined datasource list endpoint
 
-A new `SIGNAL_CACHE_CONFIG` configuration provides a unified Redis-based backend for real-time coordination features in Superset. This backend enables:
+Added a new combined datasource list endpoint at `GET /api/v1/datasource/` to serve datasets and semantic views in one response.
+
+- The endpoint is available to users with at least one of `can_read` on `Dataset` or `SemanticView`.
+- Semantic views are included only when the `SEMANTIC_LAYERS` feature flag is enabled.
+- The endpoint enforces strict `order_column` validation and returns `400` for invalid sort columns.
+
+### ClickHouse minimum driver version bump
+
+The minimum required version of `clickhouse-connect` has been raised to `>=0.13.0`. If you are using the ClickHouse connector, please upgrade your `clickhouse-connect` package. The `_mutate_label` workaround that appended hash suffixes to column aliases has also been removed, as it is no longer needed with modern versions of the driver.
+
+### MCP Tool Observability
+
+MCP (Model Context Protocol) tools now include enhanced observability instrumentation for monitoring and debugging:
+
+**Two-layer instrumentation:**
+1. **Middleware layer** (`LoggingMiddleware`): Automatically logs all MCP tool calls with `duration_ms` and `success` status in the audit log (Action Log UI, logs table)
+2. **Sub-operation tracking**: All 19 MCP tools include granular `event_logger.log_context()` blocks for tracking individual operations like validation, database writes, and query execution
+
+**Action naming convention:**
+- Tool-level logs: `mcp_tool_call` (via middleware)
+- Sub-operation logs: `mcp.{tool_name}.{operation}` (e.g., `mcp.generate_chart.validation`, `mcp.execute_sql.query_execution`)
+
+**Querying MCP logs:**
+```sql
+-- Top slowest MCP operations
+SELECT action, COUNT(*) as calls, AVG(duration_ms) as avg_ms
+FROM logs
+WHERE action LIKE 'mcp.%'
+GROUP BY action
+ORDER BY avg_ms DESC
+LIMIT 20;
+
+-- MCP tool success rate
+SELECT
+    json_extract(curated_payload, '$.tool') as tool,
+    COUNT(*) as total_calls,
+    SUM(CASE WHEN json_extract(curated_payload, '$.success') = 'true' THEN 1 ELSE 0 END) as successful,
+    ROUND(100.0 * SUM(CASE WHEN json_extract(curated_payload, '$.success') = 'true' THEN 1 ELSE 0 END) / COUNT(*), 2) as success_rate
+FROM logs
+WHERE action = 'mcp_tool_call'
+GROUP BY tool
+ORDER BY total_calls DESC;
+```
+
+**Security note:** Sensitive parameters (passwords, API keys, tokens) are automatically redacted in logs as `[REDACTED]`.
+
+### Distributed Coordination Backend
+
+A new `DISTRIBUTED_COORDINATION_CONFIG` configuration provides a unified Redis-based backend for real-time coordination features in Superset. This backend enables:
 
 - **Pub/sub messaging** for real-time event notifications between workers
 - **Atomic distributed locking** using Redis SET NX EX (more performant than database-backed locks)
 - **Event-based coordination** for background task management
 
-The signal cache is used by the Global Task Framework (GTF) for abort notifications and task completion signaling, and will eventually replace `GLOBAL_ASYNC_QUERIES_CACHE_BACKEND` as the standard signaling backend. Configuring this is recommended for Redis enabled production deployments.
+The distributed coordination is used by the Global Task Framework (GTF) for abort notifications and task completion signaling, and will eventually replace `GLOBAL_ASYNC_QUERIES_CACHE_BACKEND` as the standard signaling backend. Configuring this is recommended for Redis enabled production deployments.
 
 Example configuration in `superset_config.py`:
 ```python
-SIGNAL_CACHE_CONFIG = {
+DISTRIBUTED_COORDINATION_CONFIG = {
     "CACHE_TYPE": "RedisCache",
     "CACHE_KEY_PREFIX": "signal_",
     "CACHE_REDIS_URL": "redis://localhost:6379/1",

docker-compose-image-tag.yml

@@ -45,7 +45,7 @@ services:
         required: true
       - path: docker/.env-local # optional override
         required: false
-    image: postgres:16
+    image: postgres:17
     container_name: superset_db
     restart: unless-stopped
     volumes:

docker-compose-light.yml

@@ -85,7 +85,7 @@ services:
         required: true
       - path: docker/.env-local # optional override
         required: false
-    image: postgres:16
+    image: postgres:17
     restart: unless-stopped
     volumes:
       - db_home_light:/var/lib/postgresql/data

docker-compose-non-dev.yml

@@ -49,7 +49,7 @@ services:
         required: true
       - path: docker/.env-local # optional override
         required: false
-    image: postgres:16
+    image: postgres:17
     container_name: superset_db
     restart: unless-stopped
     volumes:

docker-compose.yml

@@ -76,7 +76,7 @@ services:
         required: true
       - path: docker/.env-local # optional override
         required: false
-    image: postgres:16
+    image: postgres:17
     restart: unless-stopped
     ports:
       - "127.0.0.1:${DATABASE_PORT:-5432}:5432"

docker/pythonpath_dev/superset_config.py

@@ -105,7 +105,13 @@ class CeleryConfig:
 
 CELERY_CONFIG = CeleryConfig
 
-FEATURE_FLAGS = {"ALERT_REPORTS": True, "DATASET_FOLDERS": True}
+FEATURE_FLAGS = {
+    "ALERT_REPORTS": True,
+    "DATASET_FOLDERS": True,
+    "ENABLE_EXTENSIONS": True,
+    "SEMANTIC_LAYERS": True,
+}
+EXTENSIONS_PATH = "/app/docker/extensions"
 ALERT_REPORTS_NOTIFICATION_DRY_RUN = True
 WEBDRIVER_BASEURL = f"http://superset_app{os.environ.get('SUPERSET_APP_ROOT', '/')}/"  # When using docker compose baseurl should be http://superset_nginx{ENV{BASEPATH}}/  # noqa: E501
 # The base URL for the email report hyperlinks.

docs/.claude/instructions.md

@@ -111,5 +111,5 @@ InteractiveMenu.parameters = {
 
 - **Generator**: `docs/scripts/generate-superset-components.mjs`
 - **Wrapper**: `docs/src/components/StorybookWrapper.jsx`
-- **Output**: `docs/developer_portal/components/`
+- **Output**: `docs/developer_docs/components/`
 - **Stories**: `superset-frontend/packages/superset-ui-core/src/components/*/`

docs/.gitignore

@@ -33,14 +33,14 @@ docs/databases/
 
 # Generated API documentation (regenerated at build time from openapi.json)
 # Source of truth is static/resources/openapi.json
-docs/api/
+developer_docs/api/
 
 # Generated component documentation MDX files (regenerated at build time)
 # Source of truth is Storybook stories in superset-frontend/packages/superset-ui-core/src/components/
-developer_portal/components/
-
-# Generated extension component documentation (regenerated at build time)
-developer_portal/extensions/components/
+developer_docs/components/
 
 # Note: src/data/databases.json is COMMITTED (not ignored) to preserve feature diagnostics
 # that require Flask context to generate. Update it locally with: npm run gen-db-docs
+
+# Generated component metadata JSON (regenerated by generate-superset-components.mjs)
+static/data/components.json

docs/.nvmrc

@@ -1 +1 @@
-v20.18.3
+v22.22.0

docs/DOCS_CLAUDE.md

@@ -416,7 +416,7 @@ If versions don't appear in dropdown:
 
 - [Docusaurus Documentation](https://docusaurus.io/docs)
 - [MDX Documentation](https://mdxjs.com/)
-- [Superset Developer Portal](https://superset.apache.org/developer_portal/)
+- [Superset Developer Docs](https://superset.apache.org/developer-docs/)
 - [Main Superset Documentation](https://superset.apache.org/docs/intro)
 
 ## 📖 Real Examples and Patterns

docs/README.md

@@ -19,15 +19,16 @@ under the License.
 
 This is the public documentation site for Superset, built using
 [Docusaurus 3](https://docusaurus.io/). See the
-[Developer Portal](https://superset.apache.org/developer_portal/contributing/development-setup#documentation)
+[Developer Docs](https://superset.apache.org/developer-docs/contributing/development-setup#documentation)
 for documentation on contributing to documentation.
 
 ## Version Management
 
-The Superset documentation site uses Docusaurus versioning with three independent versioned sections:
+The Superset documentation site uses Docusaurus versioning with four independent sections:
 
-- **Main Documentation** (`/docs/`) - Core Superset documentation
-- **Developer Portal** (`/developer_portal/`) - Developer guides and tutorials  
+- **User Documentation** (`/user-docs/`) - End-user guides and tutorials
+- **Admin Documentation** (`/admin-docs/`) - Installation, configuration, and security
+- **Developer Docs** (`/developer-docs/`) - Developer guides, contributing, and extensions
 - **Component Playground** (`/components/`) - Interactive component examples (currently disabled)
 
 Each section maintains its own version history and can be versioned independently.

docs/admin_docs/configuration/alerts-reports.mdx

@@ -20,12 +20,12 @@ Alerts and reports are disabled by default. To turn them on, you'll need to chan
 
 #### In your `superset_config.py` or `superset_config_docker.py`
 
-- `"ALERT_REPORTS"` [feature flag](/docs/configuration/configuring-superset#feature-flags) must be turned to True.
+- `"ALERT_REPORTS"` [feature flag](/admin-docs/configuration/configuring-superset#feature-flags) must be turned to True.
 - `beat_schedule` in CeleryConfig must contain schedule for `reports.scheduler`.
 - At least one of those must be configured, depending on what you want to use:
   - emails: `SMTP_*` settings
   - Slack messages: `SLACK_API_TOKEN`
-- Users can customize the email subject by including date code placeholders, which will automatically be replaced with the corresponding UTC date when the email is sent. To enable this functionality, activate the `"DATE_FORMAT_IN_EMAIL_SUBJECT"` [feature flag](/docs/configuration/configuring-superset#feature-flags). This enables date formatting in email subjects, preventing all reporting emails from being grouped into the same thread (optional for the reporting feature).
+- Users can customize the email subject by including date code placeholders, which will automatically be replaced with the corresponding UTC date when the email is sent. To enable this functionality, activate the `"DATE_FORMAT_IN_EMAIL_SUBJECT"` [feature flag](/admin-docs/configuration/configuring-superset#feature-flags). This enables date formatting in email subjects, preventing all reporting emails from being grouped into the same thread (optional for the reporting feature).
     - Use date codes from [strftime.org](https://strftime.org/) to create the email subject.
     - If no date code is provided, the original string will be used as the email subject.
 
@@ -36,7 +36,7 @@ Screenshots will be taken but no messages actually sent as long as `ALERT_REPORT
 #### In your `Dockerfile`
 
 You'll need to extend the Superset image to include a headless browser. Your options include:
-- Use Playwright with Chrome: this is the recommended approach as of version 4.1.x or greater. A working example of a Dockerfile that installs these tools is provided under "Building your own production Docker image" on the [Docker Builds](/docs/installation/docker-builds#building-your-own-production-docker-image) page. Read the code comments there as you'll also need to change a feature flag in your config.
+- Use Playwright with Chrome: this is the recommended approach as of version 4.1.x or greater. A working example of a Dockerfile that installs these tools is provided under "Building your own production Docker image" on the [Docker Builds](/admin-docs/installation/docker-builds#building-your-own-production-docker-image) page. Read the code comments there as you'll also need to change a feature flag in your config.
 - Use Firefox: you'll need to install geckodriver and Firefox.
 - Use Chrome without Playwright: you'll need to install Chrome and set the value of `WEBDRIVER_TYPE` to `"chrome"` in your `superset_config.py`.
 
@@ -84,7 +84,7 @@ SLACK_API_RATE_LIMIT_RETRY_COUNT = 5
 ### Kubernetes-specific
 
 - You must have a `celery beat` pod running. If you're using the chart included in the GitHub repository under [helm/superset](https://github.com/apache/superset/tree/master/helm/superset), you need to put `supersetCeleryBeat.enabled = true` in your values override.
-- You can see the dedicated docs about [Kubernetes installation](/docs/installation/kubernetes) for more details.
+- You can see the dedicated docs about [Kubernetes installation](/admin-docs/installation/kubernetes) for more details.
 
 ### Docker Compose specific
 
@@ -233,6 +233,20 @@ def alert_dynamic_minimal_interval(**kwargs) -> int:
 ALERT_MINIMUM_INTERVAL = alert_dynamic_minimal_interval
 ```
 
+## External Link Redirection
+
+For security, Superset rewrites external links in alert/report email HTML so
+they go through a warning page before the user is navigated to the external
+site.  Internal links (matching your configured base URL) are not affected.
+
+```python
+# Disable external link redirection entirely (default: True)
+ALERT_REPORTS_ENABLE_LINK_REDIRECT = False
+```
+
+The feature uses `WEBDRIVER_BASEURL_USER_FRIENDLY` (or `WEBDRIVER_BASEURL`)
+to determine which hosts are internal.
+
 ## Troubleshooting
 
 There are many reasons that reports might not be working.  Try these steps to check for specific issues.

docs/admin_docs/configuration/cache.mdx

@@ -84,11 +84,11 @@ Caching for SQL Lab query results is used when async queries are enabled and is
 Note that this configuration does not use a flask-caching dictionary for its configuration, but
 instead requires a cachelib object.
 
-See [Async Queries via Celery](/docs/configuration/async-queries-celery) for details.
+See [Async Queries via Celery](/admin-docs/configuration/async-queries-celery) for details.
 
 ## Caching Thumbnails
 
-This is an optional feature that can be turned on by activating its [feature flag](/docs/configuration/configuring-superset#feature-flags) on config:
+This is an optional feature that can be turned on by activating its [feature flag](/admin-docs/configuration/configuring-superset#feature-flags) on config:
 
 ```
 FEATURE_FLAGS = {
@@ -159,9 +159,9 @@ Then on configuration:
 WEBDRIVER_AUTH_FUNC = auth_driver
 ```
 
-## Signal Cache Backend
+## Distributed Coordination Backend
 
-Superset supports an optional signal cache (`SIGNAL_CACHE_CONFIG`) for
+Superset supports an optional distributed coordination (`DISTRIBUTED_COORDINATION_CONFIG`) for
 high-performance distributed operations. This configuration enables:
 
 - **Distributed locking**: Moves lock operations from the metadata database to Redis, improving
@@ -176,11 +176,11 @@ that are not available in general Flask-Caching backends.
 
 ### Configuration
 
-The signal cache uses Flask-Caching style configuration for consistency with other cache
-backends. Configure `SIGNAL_CACHE_CONFIG` in `superset_config.py`:
+The distributed coordination uses Flask-Caching style configuration for consistency with other cache
+backends. Configure `DISTRIBUTED_COORDINATION_CONFIG` in `superset_config.py`:
 
 ```python
-SIGNAL_CACHE_CONFIG = {
+DISTRIBUTED_COORDINATION_CONFIG = {
     "CACHE_TYPE": "RedisCache",
     "CACHE_REDIS_HOST": "localhost",
     "CACHE_REDIS_PORT": 6379,
@@ -192,7 +192,7 @@ SIGNAL_CACHE_CONFIG = {
 For Redis Sentinel deployments:
 
 ```python
-SIGNAL_CACHE_CONFIG = {
+DISTRIBUTED_COORDINATION_CONFIG = {
     "CACHE_TYPE": "RedisSentinelCache",
     "CACHE_REDIS_SENTINELS": [("sentinel1", 26379), ("sentinel2", 26379)],
     "CACHE_REDIS_SENTINEL_MASTER": "mymaster",
@@ -205,7 +205,7 @@ SIGNAL_CACHE_CONFIG = {
 For SSL/TLS connections:
 
 ```python
-SIGNAL_CACHE_CONFIG = {
+DISTRIBUTED_COORDINATION_CONFIG = {
     "CACHE_TYPE": "RedisCache",
     "CACHE_REDIS_HOST": "redis.example.com",
     "CACHE_REDIS_PORT": 6380,
@@ -229,7 +229,7 @@ Individual lock acquisitions can override this value when needed.
 
 ### Database-Only Mode
 
-When `SIGNAL_CACHE_CONFIG` is not configured, Superset uses database-backed operations:
+When `DISTRIBUTED_COORDINATION_CONFIG` is not configured, Superset uses database-backed operations:
 
 - **Locking**: Uses the KeyValue table with periodic cleanup of expired entries
 - **Event notifications**: Uses database polling instead of pub/sub

docs/admin_docs/configuration/configuring-superset.mdx

@@ -37,7 +37,7 @@ ENV SUPERSET_CONFIG_PATH /app/superset_config.py
 ```
 
 Docker compose deployments handle application configuration differently using specific conventions.
-Refer to the [docker compose tips & configuration](/docs/installation/docker-compose#docker-compose-tips--configuration)
+Refer to the [docker compose tips & configuration](/admin-docs/installation/docker-compose#docker-compose-tips--configuration)
 for details.
 
 The following is an example of just a few of the parameters you can set in your `superset_config.py` file:
@@ -220,11 +220,12 @@ RequestHeader set X-Forwarded-Proto "https"
 *Please be advised that this feature is in BETA.*
 
 Superset supports running the application under a non-root path. The root path
-prefix can be specified in one of two ways:
+prefix can be specified in one of three ways:
 
-- Setting the `SUPERSET_APP_ROOT` environment variable to the desired prefix.
 - Customizing the [Flask entrypoint](https://github.com/apache/superset/blob/master/superset/app.py#L29)
-  by passing the `superset_app_root` variable.
+  by passing the `superset_app_root` variable; or
+- Setting the `SUPERSET_APP_ROOT` environment variable to the desired prefix; or
+- Setting the `APPLICATION_ROOT` config in your `superset_config.py` file.
 
 Note, the prefix should start with a `/`.
 
@@ -246,7 +247,7 @@ flask --app "superset.app:create_app(superset_app_root='/analytics')"
 
 ### Docker builds
 
-The [docker compose](/docs/installation/docker-compose#configuring-further) developer
+The [docker compose](/admin-docs/installation/docker-compose#configuring-further) developer
 configuration includes an additional environmental variable,
 [`SUPERSET_APP_ROOT`](https://github.com/apache/superset/blob/master/docker/.env),
 to simplify the process of setting up a non-default root path across the services.
@@ -441,7 +442,7 @@ FEATURE_FLAGS = {
 }
 ```
 
-A current list of feature flags can be found in the [Feature Flags](/docs/configuration/feature-flags) documentation.
+A current list of feature flags can be found in the [Feature Flags](/admin-docs/configuration/feature-flags) documentation.
 
 :::resources
 - [Blog: Feature Flags in Apache Superset](https://preset.io/blog/feature-flags-in-apache-superset-and-preset/)

docs/admin_docs/configuration/networking-settings.mdx

@@ -60,11 +60,11 @@ There are two approaches to making dashboards publicly accessible:
 
 **Option 2: Dashboard-level access (selective control)**
 1. Set `PUBLIC_ROLE_LIKE = "Public"` in `superset_config.py`
-2. Add the `'DASHBOARD_RBAC': True` [Feature Flag](/docs/configuration/feature-flags)
+2. Add the `'DASHBOARD_RBAC': True` [Feature Flag](/admin-docs/configuration/feature-flags)
 3. Edit each dashboard's properties and add the "Public" role
 4. Only dashboards with the Public role explicitly assigned are visible to anonymous users
 
-See the [Public role documentation](/docs/security/security#public) for more details.
+See the [Public role documentation](/admin-docs/security/security#public) for more details.
 
 #### Embedding a Public Dashboard
 
@@ -96,6 +96,24 @@ To enable this entry, add the following line to the `.env` file:
 SUPERSET_FEATURE_EMBEDDED_SUPERSET=true
 ```
 
+### Hiding the Logout Button in Embedded Contexts
+
+When Superset is embedded in an application that manages authentication via SSO (OAuth2, SAML, or JWT), the logout button should be hidden since session management is handled by the parent application.
+
+To hide the logout button in embedded contexts, add to `superset_config.py`:
+
+```python
+FEATURE_FLAGS = {
+    "DISABLE_EMBEDDED_SUPERSET_LOGOUT": True,
+}
+```
+
+This flag only hides the logout button when Superset detects it is running inside an iframe. Users accessing Superset directly (not embedded) will still see the logout button regardless of this setting.
+
+:::note
+When embedding with SSO, also set `SESSION_COOKIE_SAMESITE = 'None'` and `SESSION_COOKIE_SECURE = True`. See [Security documentation](/docs/security/securing_superset) for details.
+:::
+
 ## CSRF settings
 
 Similarly, [flask-wtf](https://flask-wtf.readthedocs.io/en/0.15.x/config/) is used to manage

docs/admin_docs/configuration/sql-templating.mdx

@@ -7,10 +7,14 @@ version: 1
 
 # SQL Templating
 
+:::tip Looking to use SQL templating?
+For a user-focused guide on writing Jinja templates in SQL Lab and virtual datasets, see the [SQL Templating User Guide](/user-docs/using-superset/sql-templating). This page covers administrator configuration options.
+:::
+
 ## Jinja Templates
 
 SQL Lab and Explore supports [Jinja templating](https://jinja.palletsprojects.com/en/2.11.x/) in queries.
-To enable templating, the `ENABLE_TEMPLATE_PROCESSING` [feature flag](/docs/configuration/configuring-superset#feature-flags) needs to be enabled in `superset_config.py`.
+To enable templating, the `ENABLE_TEMPLATE_PROCESSING` [feature flag](/admin-docs/configuration/configuring-superset#feature-flags) needs to be enabled in `superset_config.py`.
 
 :::warning[Security Warning]
 

docs/admin_docs/configuration/timezones.mdx

@@ -20,7 +20,7 @@ To help make the problem somewhat tractable—given that Apache Superset has no
 
 To strive for data consistency (regardless of the timezone of the client) the Apache Superset backend tries to ensure that any timestamp sent to the client has an explicit (or semi-explicit as in the case with [Epoch time](https://en.wikipedia.org/wiki/Unix_time) which is always in reference to UTC) timezone encoded within.
 
-The challenge however lies with the slew of [database engines](/docs/databases#installing-drivers-in-docker) which Apache Superset supports and various inconsistencies between their [Python Database API (DB-API)](https://www.python.org/dev/peps/pep-0249/) implementations combined with the fact that we use [Pandas](https://pandas.pydata.org/) to read SQL into a DataFrame prior to serializing to JSON. Regrettably Pandas ignores the DB-API [type_code](https://www.python.org/dev/peps/pep-0249/#type-objects) relying by default on the underlying Python type returned by the DB-API. Currently only a subset of the supported database engines work correctly with Pandas, i.e., ensuring timestamps without an explicit timestamp are serializd to JSON with the server timezone, thus guaranteeing the client will display timestamps in a consistent manner irrespective of the client's timezone.
+The challenge however lies with the slew of [database engines](/admin-docs/databases#installing-drivers-in-docker) which Apache Superset supports and various inconsistencies between their [Python Database API (DB-API)](https://www.python.org/dev/peps/pep-0249/) implementations combined with the fact that we use [Pandas](https://pandas.pydata.org/) to read SQL into a DataFrame prior to serializing to JSON. Regrettably Pandas ignores the DB-API [type_code](https://www.python.org/dev/peps/pep-0249/#type-objects) relying by default on the underlying Python type returned by the DB-API. Currently only a subset of the supported database engines work correctly with Pandas, i.e., ensuring timestamps without an explicit timestamp are serializd to JSON with the server timezone, thus guaranteeing the client will display timestamps in a consistent manner irrespective of the client's timezone.
 
 For example the following is a comparison of MySQL and Presto,
 

docs/admin_docs/index.md

@@ -0,0 +1,42 @@
+---
+title: Admin Documentation
+description: Administrator guides for installing, configuring, and managing Apache Superset
+---
+
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+# Admin Documentation
+
+This section contains documentation for system administrators and operators who deploy and manage Apache Superset installations.
+
+## What's in this section
+
+- **[Installation](/admin-docs/installation/installation-methods)** - Deploy Superset using Docker, Kubernetes, or PyPI
+- **[Configuration](/admin-docs/configuration/configuring-superset)** - Configure authentication, caching, feature flags, and more
+- **[Security](/admin-docs/security/)** - Set up roles, permissions, and secure your deployment
+
+## Related
+
+- **[Database Drivers](/user-docs/databases/)** - See User Docs for database connection setup (admins may need to install drivers)
+
+## Looking for something else?
+
+- **[User Documentation](/user-docs/)** - Guides for analysts and business users
+- **[Developer Documentation](/developer-docs)** - Contributing, extensions, and development guides

docs/admin_docs/installation/architecture.mdx

@@ -24,10 +24,10 @@ A Superset installation is made up of these components:
 
 The optional components above are necessary to enable these features:
 
-- [Alerts and Reports](/docs/configuration/alerts-reports)
-- [Caching](/docs/configuration/cache)
-- [Async Queries](/docs/configuration/async-queries-celery/)
-- [Dashboard Thumbnails](/docs/configuration/cache/#caching-thumbnails)
+- [Alerts and Reports](/admin-docs/configuration/alerts-reports)
+- [Caching](/admin-docs/configuration/cache)
+- [Async Queries](/admin-docs/configuration/async-queries-celery/)
+- [Dashboard Thumbnails](/admin-docs/configuration/cache/#caching-thumbnails)
 
 If you install with Kubernetes or Docker Compose, all of these components will be created.
 
@@ -59,7 +59,7 @@ The caching layer serves two main functions:
 - Store the results of queries to your data warehouse so that when a chart is loaded twice, it pulls from the cache the second time, speeding up the application and reducing load on your data warehouse.
 - Act as a message broker for the worker, enabling the Alerts & Reports, async queries, and thumbnail caching features.
 
-Most people use Redis for their cache, but Superset supports other options too. See the [cache docs](/docs/configuration/cache/) for more.
+Most people use Redis for their cache, but Superset supports other options too. See the [cache docs](/admin-docs/configuration/cache/) for more.
 
 ### Worker and Beat
 
@@ -67,6 +67,6 @@ This is one or more workers who execute tasks like run async queries or take sna
 
 ## Other components
 
-Other components can be incorporated into Superset. The best place to learn about additional configurations is the [Configuration page](/docs/configuration/configuring-superset). For instance, you could set up a load balancer or reverse proxy to implement HTTPS in front of your Superset application, or specify a Mapbox URL to enable geospatial charts, etc.
+Other components can be incorporated into Superset. The best place to learn about additional configurations is the [Configuration page](/admin-docs/configuration/configuring-superset). For instance, you could set up a load balancer or reverse proxy to implement HTTPS in front of your Superset application, or specify a Mapbox URL to enable geospatial charts, etc.
 
 Superset won't even start without certain configuration settings established, so it's essential to review that page.

docs/admin_docs/installation/docker-compose.mdx

@@ -17,11 +17,11 @@ Since `docker compose` is primarily designed to run a set of containers on **a s
 and can't support requirements for **high availability**, we do not support nor recommend
 using our `docker compose` constructs to support production-type use-cases. For single host
 environments, we recommend using [minikube](https://minikube.sigs.k8s.io/docs/start/) along
-with our [installing on k8s](https://superset.apache.org/docs/installation/running-on-kubernetes)
+with our [installing on k8s](https://superset.apache.org/admin-docs/installation/running-on-kubernetes)
 documentation.
 :::
 
-As mentioned in our [quickstart guide](/docs/quickstart), the fastest way to try
+As mentioned in our [quickstart guide](/user-docs/quickstart), the fastest way to try
 Superset locally is using Docker Compose on a Linux or Mac OSX
 computer. Superset does not have official support for Windows. It's also the easiest
 way to launch a fully functioning **development environment** quickly.

docs/admin_docs/installation/installation-methods.mdx

@@ -9,11 +9,11 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 
 # Installation Methods
 
-How should you install Superset? Here's a comparison of the different options. It will help if you've first read the [Architecture](/docs/installation/architecture.mdx) page to understand Superset's different components.
+How should you install Superset? Here's a comparison of the different options. It will help if you've first read the [Architecture](/admin-docs/installation/architecture) page to understand Superset's different components.
 
 The fundamental trade-off is between you needing to do more of the detail work yourself vs. using a more complex deployment route that handles those details.
 
-## [Docker Compose](/docs/installation/docker-compose.mdx)
+## [Docker Compose](/admin-docs/installation/docker-compose)
 
 **Summary:** This takes advantage of containerization while remaining simpler than Kubernetes. This is the best way to try out Superset; it's also useful for developing & contributing back to Superset.
 
@@ -27,9 +27,9 @@ You will need to back up your metadata DB. That could mean backing up the servic
 
 You will also need to extend the Superset docker image. The default `lean` images do not contain drivers needed to access your metadata database (Postgres or MySQL), nor to access your data warehouse, nor the headless browser needed for Alerts & Reports. You could run a `-dev` image while demoing Superset, which has some of this, but you'll still need to install the driver for your data warehouse. The `-dev` images run as root, which is not recommended for production.
 
-Ideally you will build your own image of Superset that extends `lean`, adding what your deployment needs. See [Building your own production Docker image](/docs/installation/docker-builds/#building-your-own-production-docker-image).
+Ideally you will build your own image of Superset that extends `lean`, adding what your deployment needs. See [Building your own production Docker image](/admin-docs/installation/docker-builds/#building-your-own-production-docker-image).
 
-## [Kubernetes (K8s)](/docs/installation/kubernetes.mdx)
+## [Kubernetes (K8s)](/admin-docs/installation/kubernetes)
 
 **Summary:** This is the best-practice way to deploy a production instance of Superset, but has the steepest skill requirement - someone who knows Kubernetes.
 
@@ -41,7 +41,7 @@ A K8s deployment can scale up and down based on usage and deploy rolling updates
 
 You will need to build your own Docker image, and back up your metadata DB, both as described in Docker Compose above. You'll also need to customize your Helm chart values and deploy and maintain your Kubernetes cluster.
 
-## [PyPI (Python)](/docs/installation/pypi.mdx)
+## [PyPI (Python)](/admin-docs/installation/pypi)
 
 **Summary:** This is the only method that requires no knowledge of containers. It requires the most hands-on work to deploy, connect, and maintain each component.
 

docs/admin_docs/installation/kubernetes.mdx

@@ -149,7 +149,7 @@ For production clusters it's recommended to build own image with this step done
 Superset requires a Python DB-API database driver and a SQLAlchemy
 dialect to be installed for each datastore you want to connect to.
 
-See [Install Database Drivers](/docs/databases#installing-database-drivers) for more information.
+See [Install Database Drivers](/admin-docs/databases#installing-database-drivers) for more information.
 It is recommended that you refer to versions listed in
 [pyproject.toml](https://github.com/apache/superset/blob/master/pyproject.toml)
 instead of hard-coding them in your bootstrap script, as seen below.
@@ -310,7 +310,7 @@ configOverrides:
 
 ### Enable Alerts and Reports
 
-For this, as per the [Alerts and Reports doc](/docs/configuration/alerts-reports), you will need to:
+For this, as per the [Alerts and Reports doc](/admin-docs/configuration/alerts-reports), you will need to:
 
 #### Install a supported webdriver in the Celery worker
 
@@ -323,7 +323,7 @@ supersetWorker:
     - -c
     - |
       # Install chrome webdriver
-      # See https://github.com/apache/superset/blob/4fa3b6c7185629b87c27fc2c0e5435d458f7b73d/docs/src/pages/docs/installation/email_reports.mdx
+      # See https://github.com/apache/superset/blob/4fa3b6c7185629b87c27fc2c0e5435d458f7b73d/docs/src/pages/admin-docs/installation/email_reports.mdx
       apt-get update
       apt-get install -y wget
       wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

docs/admin_docs/installation/pypi.mdx

@@ -134,7 +134,7 @@ pip install apache_superset
 
 Then, define mandatory configurations, SECRET_KEY and FLASK_APP:
 ```bash
-export SUPERSET_SECRET_KEY=YOUR-SECRET-KEY # For production use, make sure this is a strong key, for example generated using `openssl rand -base64 42`. See https://superset.apache.org/docs/configuration/configuring-superset#specifying-a-secret_key
+export SUPERSET_SECRET_KEY=YOUR-SECRET-KEY # For production use, make sure this is a strong key, for example generated using `openssl rand -base64 42`. See https://superset.apache.org/admin-docs/configuration/configuring-superset#specifying-a-secret_key
 export FLASK_APP=superset
 ```
 

docs/admin_docs/security/cves.mdx

@@ -2,6 +2,15 @@
 title: CVEs fixed by release
 sidebar_position: 2
 ---
+#### Version 6.0.0
+
+| CVE            | Title                                                                              | Affected |
+|:---------------|:-----------------------------------------------------------------------------------|---------:|
+| CVE-2026-23980 | Improper Neutralization of Special Elements used in a SQL Command                  |  < 6.0.0 |
+| CVE-2026-23982 | Improper Authorization in Dataset Creation Allows Access Control Bypass            |  < 6.0.0 |
+| CVE-2026-23983 | Information Disclosure of sensitive user info via Tags                             |  < 6.0.0 |
+| CVE-2026-23984 | SQLLab Read-Only Bypass on PostgreSQL (DML execution)                              |  < 6.0.0 |
+
 #### Version 5.0.0
 
 | CVE            | Title                                                                              | Affected |
@@ -22,6 +31,7 @@ sidebar_position: 2
 |:---------------|:-----------------------------------------------------------------------------------|---------:|
 | CVE-2025-27696 | Improper authorization leading to resource ownership takeover                      |  < 4.1.2 |
 | CVE-2025-48912 | Improper authorization bypass on row level security via SQL Injection              |  < 4.1.2 |
+| CVE-2026-23969 | Exposure of Sensitive Information via Incomplete ClickHouse Function Filtering     |  < 4.1.2 |
 
 #### Version 4.1.0
 

docs/admin_docs/security/securing_superset.mdx

@@ -114,7 +114,7 @@ Superset can use Flask-Talisman to set security headers. However, it must be exp
 >
 > In Superset 4.0 and later, Talisman is disabled by default (`TALISMAN_ENABLED = False`). You **must** explicitly enable it in your `superset_config.py` for the security headers defined in `TALISMAN_CONFIG` to take effect.
 
-Here's the documentation section how how to set up Talisman: https://superset.apache.org/docs/security/#content-security-policy-csp
+Here's the documentation section how how to set up Talisman: https://superset.apache.org/admin-docs/security/#content-security-policy-csp
 
 ### **Database Security**
 
@@ -171,7 +171,7 @@ Rotating the `SUPERSET_SECRET_KEY` is a critical security procedure. It is manda
 
 **Procedure for Rotating the Key**
 The procedure for safely rotating the SECRET_KEY must be followed precisely to avoid locking yourself out of your instance. The official Apache Superset documentation maintains the correct, up-to-date procedure. Please follow the official guide here:
-https://superset.apache.org/docs/configuration/configuring-superset/#rotating-to-a-newer-secret_key
+https://superset.apache.org/admin-docs/configuration/configuring-superset/#rotating-to-a-newer-secret_key
 
 :::resources
 - [Blog: Running Apache Superset on the Open Internet](https://preset.io/blog/running-apache-superset-on-the-open-internet-a-report-from-the-fireline/)

docs/admin_docs/security/security.mdx

@@ -431,7 +431,7 @@ TALISMAN_CONFIG = {
 ```
 
 For more information on setting up Talisman, please refer to
-https://superset.apache.org/docs/configuration/networking-settings/#changing-flask-talisman-csp.
+https://superset.apache.org/admin-docs/configuration/networking-settings/#changing-flask-talisman-csp.
 
 ### Reporting Security Vulnerabilities
 

docs/developer_docs/api.mdx

@@ -68,14 +68,14 @@ curl -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
 | `POST` | [Create a new dashboard](./api/create-a-new-dashboard) | `/api/v1/dashboard/` |
 | `GET` | [Get metadata information about this API resource (dashboard--info)](./api/get-metadata-information-about-this-api-resource-dashboard-info) | `/api/v1/dashboard/_info` |
 | `GET` | [Get a dashboard detail information](./api/get-a-dashboard-detail-information) | `/api/v1/dashboard/{id_or_slug}` |
-| `GET` | [Get a dashboard's chart definitions.](./api/get-a-dashboards-chart-definitions) | `/api/v1/dashboard/{id_or_slug}/charts` |
+| `GET` | [Get a dashboard's chart definitions.](./api/get-a-dashboard-s-chart-definitions) | `/api/v1/dashboard/{id_or_slug}/charts` |
 | `POST` | [Create a copy of an existing dashboard](./api/create-a-copy-of-an-existing-dashboard) | `/api/v1/dashboard/{id_or_slug}/copy/` |
-| `GET` | [Get dashboard's datasets](./api/get-dashboards-datasets) | `/api/v1/dashboard/{id_or_slug}/datasets` |
-| `DELETE` | [Delete a dashboard's embedded configuration](./api/delete-a-dashboards-embedded-configuration) | `/api/v1/dashboard/{id_or_slug}/embedded` |
-| `GET` | [Get the dashboard's embedded configuration](./api/get-the-dashboards-embedded-configuration) | `/api/v1/dashboard/{id_or_slug}/embedded` |
-| `POST` | [Set a dashboard's embedded configuration](./api/set-a-dashboards-embedded-configuration) | `/api/v1/dashboard/{id_or_slug}/embedded` |
+| `GET` | [Get dashboard's datasets](./api/get-dashboard-s-datasets) | `/api/v1/dashboard/{id_or_slug}/datasets` |
+| `DELETE` | [Delete a dashboard's embedded configuration](./api/delete-a-dashboard-s-embedded-configuration) | `/api/v1/dashboard/{id_or_slug}/embedded` |
+| `GET` | [Get the dashboard's embedded configuration](./api/get-the-dashboard-s-embedded-configuration) | `/api/v1/dashboard/{id_or_slug}/embedded` |
+| `POST` | [Set a dashboard's embedded configuration](./api/set-a-dashboard-s-embedded-configuration) | `/api/v1/dashboard/{id_or_slug}/embedded` |
 | `PUT` | [Update dashboard by id_or_slug embedded](./api/update-dashboard-by-id-or-slug-embedded) | `/api/v1/dashboard/{id_or_slug}/embedded` |
-| `GET` | [Get dashboard's tabs](./api/get-dashboards-tabs) | `/api/v1/dashboard/{id_or_slug}/tabs` |
+| `GET` | [Get dashboard's tabs](./api/get-dashboard-s-tabs) | `/api/v1/dashboard/{id_or_slug}/tabs` |
 | `DELETE` | [Delete a dashboard](./api/delete-a-dashboard) | `/api/v1/dashboard/{pk}` |
 | `PUT` | [Update a dashboard](./api/update-a-dashboard) | `/api/v1/dashboard/{pk}` |
 | `POST` | [Compute and cache a screenshot (dashboard-pk-cache-dashboard-screenshot)](./api/compute-and-cache-a-screenshot-dashboard-pk-cache-dashboard-screenshot) | `/api/v1/dashboard/{pk}/cache_dashboard_screenshot/` |
@@ -84,7 +84,7 @@ curl -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
 | `POST` | [Mark the dashboard as favorite for the current user](./api/mark-the-dashboard-as-favorite-for-the-current-user) | `/api/v1/dashboard/{pk}/favorites/` |
 | `PUT` | [Update native filters configuration for a dashboard.](./api/update-native-filters-configuration-for-a-dashboard) | `/api/v1/dashboard/{pk}/filters` |
 | `GET` | [Get a computed screenshot from cache (dashboard-pk-screenshot-digest)](./api/get-a-computed-screenshot-from-cache-dashboard-pk-screenshot-digest) | `/api/v1/dashboard/{pk}/screenshot/{digest}/` |
-| `GET` | [Get dashboard's thumbnail](./api/get-dashboards-thumbnail) | `/api/v1/dashboard/{pk}/thumbnail/{digest}/` |
+| `GET` | [Get dashboard's thumbnail](./api/get-dashboard-s-thumbnail) | `/api/v1/dashboard/{pk}/thumbnail/{digest}/` |
 | `GET` | [Download multiple dashboards as YAML files](./api/download-multiple-dashboards-as-yaml-files) | `/api/v1/dashboard/export/` |
 | `GET` | [Check favorited dashboards for current user](./api/check-favorited-dashboards-for-current-user) | `/api/v1/dashboard/favorite_status/` |
 | `POST` | [Import dashboard(s) with associated charts/datasets/databases](./api/import-dashboard-s-with-associated-charts-datasets-databases) | `/api/v1/dashboard/import/` |
@@ -177,7 +177,7 @@ curl -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
 | `GET` | [Get names of databases currently available](./api/get-names-of-databases-currently-available) | `/api/v1/database/available/` |
 | `GET` | [Download database(s) and associated dataset(s) as a zip file](./api/download-database-s-and-associated-dataset-s-as-a-zip-file) | `/api/v1/database/export/` |
 | `POST` | [Import database(s) with associated datasets](./api/import-database-s-with-associated-datasets) | `/api/v1/database/import/` |
-| `GET` | [Receive personal access tokens from OAuth2](./api/receive-personal-access-tokens-from-o-auth-2) | `/api/v1/database/oauth2/` |
+| `GET` | [Receive personal access tokens from OAuth2](./api/receive-personal-access-tokens-from-oauth2) | `/api/v1/database/oauth2/` |
 | `GET` | [Get related fields data (database-related-column-name)](./api/get-related-fields-data-database-related-column-name) | `/api/v1/database/related/{column_name}` |
 | `POST` | [Test a database connection](./api/test-a-database-connection) | `/api/v1/database/test_connection/` |
 | `POST` | [Upload a file and returns file metadata](./api/upload-a-file-and-returns-file-metadata) | `/api/v1/database/upload_metadata/` |
@@ -201,7 +201,7 @@ curl -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
 
 | Method | Endpoint | Description |
 |--------|----------|-------------|
-| `GET` | [Get the bootstrap data for SqlLab page](./api/get-the-bootstrap-data-for-sql-lab-page) | `/api/v1/sqllab/` |
+| `GET` | [Get the bootstrap data for SqlLab page](./api/get-the-bootstrap-data-for-sqllab-page) | `/api/v1/sqllab/` |
 | `POST` | [Estimate the SQL query execution cost](./api/estimate-the-sql-query-execution-cost) | `/api/v1/sqllab/estimate/` |
 | `POST` | [Execute a SQL query](./api/execute-a-sql-query) | `/api/v1/sqllab/execute/` |
 | `GET` | [Export the SQL query results to a CSV](./api/export-the-sql-query-results-to-a-csv) | `/api/v1/sqllab/export/{client_id}/` |
@@ -249,7 +249,7 @@ curl -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
 
 | Method | Endpoint | Description |
 |--------|----------|-------------|
-| `GET` | [Return an AdvancedDataTypeResponse](./api/return-an-advanced-data-type-response) | `/api/v1/advanced_data_type/convert` |
+| `GET` | [Return an AdvancedDataTypeResponse](./api/return-an-advanceddatatyperesponse) | `/api/v1/advanced_data_type/convert` |
 | `GET` | [Return a list of available advanced data types](./api/return-a-list-of-available-advanced-data-types) | `/api/v1/advanced_data_type/types` |
 
 </details>
@@ -324,8 +324,8 @@ curl -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
 
 | Method | Endpoint | Description |
 |--------|----------|-------------|
-| `POST` | [Create a new dashboard's permanent link](./api/create-a-new-dashboards-permanent-link) | `/api/v1/dashboard/{pk}/permalink` |
-| `GET` | [Get dashboard's permanent link state](./api/get-dashboards-permanent-link-state) | `/api/v1/dashboard/permalink/{key}` |
+| `POST` | [Create a new dashboard's permanent link](./api/create-a-new-dashboard-s-permanent-link) | `/api/v1/dashboard/{pk}/permalink` |
+| `GET` | [Get dashboard's permanent link state](./api/get-dashboard-s-permanent-link-state) | `/api/v1/dashboard/permalink/{key}` |
 
 </details>
 
@@ -335,7 +335,7 @@ curl -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
 | Method | Endpoint | Description |
 |--------|----------|-------------|
 | `POST` | [Create a new permanent link (explore-permalink)](./api/create-a-new-permanent-link-explore-permalink) | `/api/v1/explore/permalink` |
-| `GET` | [Get chart's permanent link state](./api/get-charts-permanent-link-state) | `/api/v1/explore/permalink/{key}` |
+| `GET` | [Get chart's permanent link state](./api/get-chart-s-permanent-link-state) | `/api/v1/explore/permalink/{key}` |
 
 </details>
 
@@ -345,7 +345,7 @@ curl -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
 | Method | Endpoint | Description |
 |--------|----------|-------------|
 | `POST` | [Create a new permanent link (sqllab-permalink)](./api/create-a-new-permanent-link-sqllab-permalink) | `/api/v1/sqllab/permalink` |
-| `GET` | [Get permanent link state for SQLLab editor.](./api/get-permanent-link-state-for-sql-lab-editor) | `/api/v1/sqllab/permalink/{key}` |
+| `GET` | [Get permanent link state for SQLLab editor.](./api/get-permanent-link-state-for-sqllab-editor) | `/api/v1/sqllab/permalink/{key}` |
 
 </details>
 
@@ -363,10 +363,10 @@ curl -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
 
 | Method | Endpoint | Description |
 |--------|----------|-------------|
-| `POST` | [Create a dashboard's filter state](./api/create-a-dashboards-filter-state) | `/api/v1/dashboard/{pk}/filter_state` |
-| `DELETE` | [Delete a dashboard's filter state value](./api/delete-a-dashboards-filter-state-value) | `/api/v1/dashboard/{pk}/filter_state/{key}` |
-| `GET` | [Get a dashboard's filter state value](./api/get-a-dashboards-filter-state-value) | `/api/v1/dashboard/{pk}/filter_state/{key}` |
-| `PUT` | [Update a dashboard's filter state value](./api/update-a-dashboards-filter-state-value) | `/api/v1/dashboard/{pk}/filter_state/{key}` |
+| `POST` | [Create a dashboard's filter state](./api/create-a-dashboard-s-filter-state) | `/api/v1/dashboard/{pk}/filter_state` |
+| `DELETE` | [Delete a dashboard's filter state value](./api/delete-a-dashboard-s-filter-state-value) | `/api/v1/dashboard/{pk}/filter_state/{key}` |
+| `GET` | [Get a dashboard's filter state value](./api/get-a-dashboard-s-filter-state-value) | `/api/v1/dashboard/{pk}/filter_state/{key}` |
+| `PUT` | [Update a dashboard's filter state value](./api/update-a-dashboard-s-filter-state-value) | `/api/v1/dashboard/{pk}/filter_state/{key}` |
 
 </details>
 

docs/developer_docs/components/TODO.md

@@ -0,0 +1,71 @@
+---
+title: Components TODO
+sidebar_class_name: hidden
+---
+
+# Components TODO
+
+These components were found but not yet supported for documentation generation.
+Future phases will add support for these sources.
+
+## Summary
+
+- **Total skipped:** 19 story files
+- **Reason:** Import path resolution not yet implemented
+
+## Skipped by Source
+
+### App Components
+
+9 components
+
+- [ ] `superset-frontend/src/components/AlteredSliceTag/AlteredSliceTag.stories.tsx`
+- [ ] `superset-frontend/src/components/Chart/DrillDetail/DrillDetailTableControls.stories.tsx`
+- [ ] `superset-frontend/src/components/CopyToClipboard/CopyToClipboard.stories.tsx`
+- [ ] `superset-frontend/src/components/ErrorMessage/ErrorAlert.stories.tsx`
+- [ ] `superset-frontend/src/components/FacePile/FacePile.stories.tsx`
+- [ ] `superset-frontend/src/components/FilterableTable/FilterableTable.stories.tsx`
+- [ ] `superset-frontend/src/components/RowCountLabel/RowCountLabel.stories.tsx`
+- [ ] `superset-frontend/src/components/Tag/Tag.stories.tsx`
+- [ ] `superset-frontend/src/components/TagsList/TagsList.stories.tsx`
+
+### Dashboard Components
+
+2 components
+
+- [ ] `superset-frontend/src/dashboard/components/AnchorLink/AnchorLink.stories.tsx`
+- [ ] `superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.stories.tsx`
+
+### Explore Components
+
+4 components
+
+- [ ] `superset-frontend/src/explore/components/ControlHeader.stories.tsx`
+- [ ] `superset-frontend/src/explore/components/RunQueryButton/RunQueryButton.stories.tsx`
+- [ ] `superset-frontend/src/explore/components/controls/BoundsControl.stories.tsx`
+- [ ] `superset-frontend/src/explore/components/controls/SliderControl.stories.tsx`
+
+### Feature Components
+
+2 components
+
+- [ ] `superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.stories.tsx`
+- [ ] `superset-frontend/src/features/home/LanguagePicker.stories.tsx`
+
+### Filter Components
+
+2 components
+
+- [ ] `superset-frontend/src/filters/components/Range/RangeFilterPlugin.stories.tsx`
+- [ ] `superset-frontend/src/filters/components/Select/SelectFilterPlugin.stories.tsx`
+
+## How to Add Support
+
+1. Determine the correct import path for the source
+2. Update `generate-superset-components.mjs` to handle the source
+3. Add source to `SUPPORTED_SOURCES` array
+4. Re-run the generator
+
+---
+
+*Auto-generated by generate-superset-components.mjs*

docs/developer_docs/components/design-system/dropdowncontainer.mdx

@@ -0,0 +1,167 @@
+---
+title: DropdownContainer
+sidebar_label: DropdownContainer
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# DropdownContainer
+
+DropdownContainer arranges items horizontally and moves overflowing items into a dropdown popover. Resize the container to see the overflow behavior.
+
+## Live Example
+
+<StoryWithControls
+  component="DropdownContainer"
+  props={{
+  style: {
+    maxWidth: 360
+  },
+  items: [
+    {
+      id: "item-0",
+      element: {
+        component: "Tag",
+        props: {
+          children: "Region",
+          color: "blue"
+        }
+      }
+    },
+    {
+      id: "item-1",
+      element: {
+        component: "Tag",
+        props: {
+          children: "Category",
+          color: "blue"
+        }
+      }
+    },
+    {
+      id: "item-2",
+      element: {
+        component: "Tag",
+        props: {
+          children: "Date Range",
+          color: "blue"
+        }
+      }
+    },
+    {
+      id: "item-3",
+      element: {
+        component: "Tag",
+        props: {
+          children: "Status",
+          color: "blue"
+        }
+      }
+    },
+    {
+      id: "item-4",
+      element: {
+        component: "Tag",
+        props: {
+          children: "Owner",
+          color: "blue"
+        }
+      }
+    },
+    {
+      id: "item-5",
+      element: {
+        component: "Tag",
+        props: {
+          children: "Priority",
+          color: "blue"
+        }
+      }
+    }
+  ]
+}}
+  controls={[]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  const items = Array.from({ length: 6 }, (_, i) => ({
+    id: 'item-' + i,
+    element: React.createElement('div', {
+      style: {
+        minWidth: 120,
+        padding: '4px 12px',
+        background: '#e6f4ff',
+        border: '1px solid #91caff',
+        borderRadius: 4,
+      },
+    }, 'Filter ' + (i + 1)),
+  }));
+  return (
+    <div style={{ width: 400, resize: 'horizontal', overflow: 'auto', border: '1px solid #e8e8e8', padding: 16 }}>
+      <DropdownContainer items={items} />
+      <div style={{ marginTop: 8, color: '#999', fontSize: 12 }}>
+        Drag the right edge to resize and see items overflow into a dropdown
+      </div>
+    </div>
+  );
+}
+```
+
+## With Select Filters
+
+```tsx live
+function SelectFilters() {
+  const items = ['Region', 'Category', 'Date Range', 'Status', 'Owner'].map(
+    (label, i) => ({
+      id: 'filter-' + i,
+      element: React.createElement('div', {
+        style: { minWidth: 150, padding: '4px 12px', background: '#f5f5f5', border: '1px solid #d9d9d9', borderRadius: 4 },
+      }, label + ': All'),
+    })
+  );
+  return (
+    <div style={{ width: 500, resize: 'horizontal', overflow: 'auto', border: '1px solid #e8e8e8', padding: 16 }}>
+      <DropdownContainer items={items} />
+    </div>
+  );
+}
+```
+
+
+
+## Import
+
+```tsx
+import { DropdownContainer } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/DropdownContainer.stories.tsx).
+:::

docs/developer_docs/components/design-system/flex.mdx

@@ -0,0 +1,197 @@
+---
+title: Flex
+sidebar_label: Flex
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# Flex
+
+The Flex component from Superset's UI library.
+
+## Live Example
+
+<StoryWithControls
+  component="Flex"
+  props={{
+  vertical: false,
+  wrap: "nowrap",
+  justify: "normal",
+  align: "normal",
+  flex: "normal",
+  gap: "small"
+}}
+  controls={[
+  {
+    name: "vertical",
+    label: "Vertical",
+    type: "boolean"
+  },
+  {
+    name: "wrap",
+    label: "Wrap",
+    type: "select",
+    options: [
+      "nowrap",
+      "wrap",
+      "wrap-reverse"
+    ]
+  },
+  {
+    name: "justify",
+    label: "Justify",
+    type: "select",
+    options: [
+      "start",
+      "center",
+      "space-between",
+      "space-around",
+      "space-evenly"
+    ]
+  },
+  {
+    name: "align",
+    label: "Align",
+    type: "select",
+    options: [
+      "start",
+      "center",
+      "end",
+      "stretch"
+    ]
+  },
+  {
+    name: "flex",
+    label: "Flex",
+    type: "string"
+  },
+  {
+    name: "gap",
+    label: "Gap",
+    type: "select",
+    options: [
+      "small",
+      "medium",
+      "large"
+    ]
+  }
+]}
+  sampleChildren={["Item 1","Item 2","Item 3","Item 4","Item 5"]}
+  sampleChildrenStyle={{padding:"8px 16px",background:"#e6f4ff",border:"1px solid #91caff",borderRadius:"4px"}}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <Flex gap="small" wrap="wrap">
+      {['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'].map(item => (
+        <div
+          key={item}
+          style={{
+            padding: '8px 16px',
+            background: '#e6f4ff',
+            border: '1px solid #91caff',
+            borderRadius: 4,
+          }}
+        >
+          {item}
+        </div>
+      ))}
+    </Flex>
+  );
+}
+```
+
+## Vertical Layout
+
+```tsx live
+function VerticalFlex() {
+  return (
+    <Flex vertical gap="small">
+      <Button buttonStyle="primary">Primary</Button>
+      <Button buttonStyle="dashed">Dashed</Button>
+      <Button buttonStyle="link">Link</Button>
+    </Flex>
+  );
+}
+```
+
+## Justify and Align
+
+```tsx live
+function JustifyAlign() {
+  const boxStyle = {
+    width: '100%',
+    height: 120,
+    borderRadius: 6,
+    border: '1px solid #40a9ff',
+  };
+  const itemStyle = {
+    width: 60,
+    height: 40,
+    backgroundColor: '#1677ff',
+    borderRadius: 4,
+  };
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {['flex-start', 'center', 'flex-end', 'space-between', 'space-around'].map(justify => (
+        <div key={justify}>
+          <span style={{ marginBottom: 4, display: 'block', color: '#666' }}>{justify}</span>
+          <Flex style={boxStyle} justify={justify} align="center">
+            <div style={itemStyle} />
+            <div style={itemStyle} />
+            <div style={itemStyle} />
+          </Flex>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `vertical` | `boolean` | `false` | - |
+| `wrap` | `string` | `"nowrap"` | - |
+| `justify` | `string` | `"normal"` | - |
+| `align` | `string` | `"normal"` | - |
+| `flex` | `string` | `"normal"` | - |
+| `gap` | `string` | `"small"` | - |
+
+## Import
+
+```tsx
+import { Flex } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Flex/Flex.stories.tsx).
+:::

docs/developer_docs/components/design-system/grid.mdx

@@ -0,0 +1,192 @@
+---
+title: Grid
+sidebar_label: Grid
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# Grid
+
+The Grid system of Ant Design is based on a 24-grid layout. The `Row` and `Col` components are used to create flexible and responsive grid layouts.
+
+## Live Example
+
+<StoryWithControls
+  component="Grid"
+  renderComponent="Row"
+  props={{
+  align: "top",
+  justify: "start",
+  wrap: true,
+  gutter: 16
+}}
+  controls={[
+  {
+    name: "align",
+    label: "Align",
+    type: "select",
+    options: [
+      "top",
+      "middle",
+      "bottom",
+      "stretch"
+    ],
+    description: "Vertical alignment of columns within the row."
+  },
+  {
+    name: "justify",
+    label: "Justify",
+    type: "select",
+    options: [
+      "start",
+      "end",
+      "center",
+      "space-around",
+      "space-between",
+      "space-evenly"
+    ],
+    description: "Horizontal distribution of columns within the row."
+  },
+  {
+    name: "wrap",
+    label: "Wrap",
+    type: "boolean",
+    description: "Whether columns are allowed to wrap to the next line."
+  },
+  {
+    name: "gutter",
+    label: "Gutter",
+    type: "number",
+    description: "Spacing between columns in pixels."
+  }
+]}
+  sampleChildren={[{"component":"Col","props":{"span":4,"children":"col-4","style":{"background":"#e6f4ff","padding":"8px","border":"1px solid #91caff","textAlign":"center"}}},{"component":"Col","props":{"span":4,"children":"col-4 (tall)","style":{"background":"#e6f4ff","padding":"24px 8px","border":"1px solid #91caff","textAlign":"center"}}},{"component":"Col","props":{"span":4,"children":"col-4","style":{"background":"#e6f4ff","padding":"8px","border":"1px solid #91caff","textAlign":"center"}}}]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <Row gutter={[16, 16]}>
+      <Col span={12}>
+        <div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-12</div>
+      </Col>
+      <Col span={12}>
+        <div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-12</div>
+      </Col>
+      <Col span={8}>
+        <div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-8</div>
+      </Col>
+      <Col span={8}>
+        <div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-8</div>
+      </Col>
+      <Col span={8}>
+        <div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-8</div>
+      </Col>
+    </Row>
+  );
+}
+```
+
+## Responsive Grid
+
+```tsx live
+function ResponsiveGrid() {
+  return (
+    <Row gutter={[16, 16]}>
+      <Col xs={24} sm={12} md={8} lg={6}>
+        <div style={{ background: '#e6f4ff', padding: '16px', border: '1px solid #91caff', textAlign: 'center' }}>
+          Responsive
+        </div>
+      </Col>
+      <Col xs={24} sm={12} md={8} lg={6}>
+        <div style={{ background: '#e6f4ff', padding: '16px', border: '1px solid #91caff', textAlign: 'center' }}>
+          Responsive
+        </div>
+      </Col>
+      <Col xs={24} sm={12} md={8} lg={6}>
+        <div style={{ background: '#e6f4ff', padding: '16px', border: '1px solid #91caff', textAlign: 'center' }}>
+          Responsive
+        </div>
+      </Col>
+      <Col xs={24} sm={12} md={8} lg={6}>
+        <div style={{ background: '#e6f4ff', padding: '16px', border: '1px solid #91caff', textAlign: 'center' }}>
+          Responsive
+        </div>
+      </Col>
+    </Row>
+  );
+}
+```
+
+## Alignment
+
+```tsx live
+function AlignmentDemo() {
+  const boxStyle = { background: '#e6f4ff', padding: '16px 0', border: '1px solid #91caff', textAlign: 'center' };
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <Row justify="start" gutter={8}>
+        <Col span={4}><div style={boxStyle}>start</div></Col>
+        <Col span={4}><div style={boxStyle}>start</div></Col>
+      </Row>
+      <Row justify="center" gutter={8}>
+        <Col span={4}><div style={boxStyle}>center</div></Col>
+        <Col span={4}><div style={boxStyle}>center</div></Col>
+      </Row>
+      <Row justify="end" gutter={8}>
+        <Col span={4}><div style={boxStyle}>end</div></Col>
+        <Col span={4}><div style={boxStyle}>end</div></Col>
+      </Row>
+      <Row justify="space-between" gutter={8}>
+        <Col span={4}><div style={boxStyle}>between</div></Col>
+        <Col span={4}><div style={boxStyle}>between</div></Col>
+      </Row>
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `align` | `string` | `"top"` | Vertical alignment of columns within the row. |
+| `justify` | `string` | `"start"` | Horizontal distribution of columns within the row. |
+| `wrap` | `boolean` | `true` | Whether columns are allowed to wrap to the next line. |
+| `gutter` | `number` | `16` | Spacing between columns in pixels. |
+
+## Import
+
+```tsx
+import Grid from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Grid/Grid.stories.tsx).
+:::

docs/developer_docs/components/design-system/index.mdx

@@ -0,0 +1,38 @@
+---
+title: Layout Components
+sidebar_label: Layout Components
+sidebar_position: 1
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+# Layout Components
+
+7 components available in this category.
+
+## Components
+
+- [DropdownContainer](./dropdowncontainer)
+- [Flex](./flex)
+- [Grid](./grid)
+- [Layout](./layout)
+- [MetadataBar](./metadatabar)
+- [Space](./space)
+- [Table](./table)

docs/developer_docs/components/design-system/layout.mdx

@@ -0,0 +1,139 @@
+---
+title: Layout
+sidebar_label: Layout
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# Layout
+
+Ant Design Layout component with configurable Sider, Header, Footer, and Content.
+
+## Live Example
+
+<StoryWithControls
+  component="Layout"
+  props={{
+  hasSider: false,
+  style: {
+    minHeight: 200
+  }
+}}
+  controls={[
+  {
+    name: "hasSider",
+    label: "Has Sider",
+    type: "boolean",
+    description: "Whether the layout contains a Sider sub-component."
+  }
+]}
+  sampleChildren={[{"component":"Layout.Header","props":{"children":"Header","style":{"background":"#001529","color":"#fff","padding":"0 24px","lineHeight":"64px"}}},{"component":"Layout.Content","props":{"children":"Content Area","style":{"padding":"24px","background":"#fff","flex":1}}},{"component":"Layout.Footer","props":{"children":"Footer","style":{"textAlign":"center","background":"#f5f5f5","padding":"12px"}}}]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <Layout style={{ minHeight: '300px' }}>
+      <Layout.Sider theme="dark" width={200}>
+        <div style={{ color: '#fff', padding: '16px' }}>Sidebar</div>
+      </Layout.Sider>
+      <Layout>
+        <Layout.Header style={{ background: '#fff', padding: '0 16px' }}>
+          Header
+        </Layout.Header>
+        <Layout.Content style={{ margin: '16px', padding: '24px', background: '#fff' }}>
+          Content
+        </Layout.Content>
+        <Layout.Footer style={{ textAlign: 'center' }}>
+          Footer
+        </Layout.Footer>
+      </Layout>
+    </Layout>
+  );
+}
+```
+
+## Content Only
+
+```tsx live
+function ContentOnly() {
+  return (
+    <Layout>
+      <Layout.Header style={{ background: '#001529', color: '#fff', padding: '0 24px', lineHeight: '64px' }}>
+        Application Header
+      </Layout.Header>
+      <Layout.Content style={{ padding: '24px', minHeight: '200px', background: '#fff' }}>
+        Main content area without a sidebar
+      </Layout.Content>
+      <Layout.Footer style={{ textAlign: 'center', background: '#f5f5f5' }}>
+        Footer Content
+      </Layout.Footer>
+    </Layout>
+  );
+}
+```
+
+## Right Sidebar
+
+```tsx live
+function RightSidebar() {
+  return (
+    <Layout style={{ minHeight: '300px' }}>
+      <Layout>
+        <Layout.Header style={{ background: '#fff', padding: '0 24px' }}>
+          Header
+        </Layout.Header>
+        <Layout.Content style={{ padding: '24px', background: '#fff' }}>
+          Content with right sidebar
+        </Layout.Content>
+      </Layout>
+      <Layout.Sider theme="light" width={200} style={{ background: '#fafafa' }}>
+        <div style={{ padding: '16px' }}>Right Sidebar</div>
+      </Layout.Sider>
+    </Layout>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `hasSider` | `boolean` | `false` | Whether the layout contains a Sider sub-component. |
+| `style` | `any` | `{"minHeight":200}` | - |
+
+## Import
+
+```tsx
+import { Layout } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Layout/Layout.stories.tsx).
+:::

docs/developer_docs/components/design-system/metadatabar.mdx

@@ -0,0 +1,174 @@
+---
+title: MetadataBar
+sidebar_label: MetadataBar
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# MetadataBar
+
+MetadataBar displays a row of metadata items (SQL info, owners, last modified, tags, dashboards, etc.) that collapse responsively based on available width.
+
+## Live Example
+
+<StoryWithControls
+  component="MetadataBar"
+  props={{
+  title: "Added to 3 dashboards",
+  createdBy: "Jane Smith",
+  modifiedBy: "Jane Smith",
+  description: "To preview the list of dashboards go to More settings.",
+  items: [
+    {
+      type: "sql",
+      title: "Click to view query"
+    },
+    {
+      type: "owner",
+      createdBy: "Jane Smith",
+      owners: [
+        "John Doe",
+        "Mary Wilson"
+      ],
+      createdOn: "a week ago"
+    },
+    {
+      type: "lastModified",
+      value: "a week ago",
+      modifiedBy: "Jane Smith"
+    },
+    {
+      type: "tags",
+      values: [
+        "management",
+        "research",
+        "poc"
+      ]
+    },
+    {
+      type: "dashboards",
+      title: "Added to 3 dashboards",
+      description: "To preview the list of dashboards go to More settings."
+    }
+  ]
+}}
+  controls={[
+  {
+    name: "title",
+    label: "Title",
+    type: "text"
+  },
+  {
+    name: "createdBy",
+    label: "Created By",
+    type: "text"
+  },
+  {
+    name: "modifiedBy",
+    label: "Modified By",
+    type: "text"
+  },
+  {
+    name: "description",
+    label: "Description",
+    type: "text"
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  const items = [
+    { type: 'sql', title: 'Click to view query' },
+    {
+      type: 'owner',
+      createdBy: 'Jane Smith',
+      owners: ['John Doe', 'Mary Wilson'],
+      createdOn: 'a week ago',
+    },
+    {
+      type: 'lastModified',
+      value: 'a week ago',
+      modifiedBy: 'Jane Smith',
+    },
+    { type: 'tags', values: ['management', 'research', 'poc'] },
+  ];
+  return <MetadataBar items={items} />;
+}
+```
+
+## Minimal Metadata
+
+```tsx live
+function MinimalMetadata() {
+  const items = [
+    { type: 'owner', createdBy: 'Admin', owners: ['Admin'], createdOn: 'yesterday' },
+    { type: 'lastModified', value: '2 hours ago', modifiedBy: 'Admin' },
+  ];
+  return <MetadataBar items={items} />;
+}
+```
+
+## Full Metadata
+
+```tsx live
+function FullMetadata() {
+  const items = [
+    { type: 'sql', title: 'SELECT * FROM ...' },
+    { type: 'owner', createdBy: 'Jane Smith', owners: ['Jane Smith', 'John Doe', 'Bob Wilson'], createdOn: '2 weeks ago' },
+    { type: 'lastModified', value: '3 days ago', modifiedBy: 'John Doe' },
+    { type: 'tags', values: ['production', 'finance', 'quarterly'] },
+    { type: 'dashboards', title: 'Used in 12 dashboards' },
+    { type: 'description', value: 'This chart shows quarterly revenue breakdown by region and product line.' },
+    { type: 'rows', title: '1.2M rows' },
+    { type: 'table', title: 'public.revenue_data' },
+  ];
+  return <MetadataBar items={items} />;
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | `"Added to 3 dashboards"` | - |
+| `createdBy` | `string` | `"Jane Smith"` | - |
+| `modifiedBy` | `string` | `"Jane Smith"` | - |
+| `description` | `string` | `"To preview the list of dashboards go to More settings."` | - |
+| `items` | `any` | `[{"type":"sql","title":"Click to view query"},{"type":"owner","createdBy":"Jane Smith","owners":["John Doe","Mary Wilson"],"createdOn":"a week ago"},{"type":"lastModified","value":"a week ago","modifiedBy":"Jane Smith"},{"type":"tags","values":["management","research","poc"]},{"type":"dashboards","title":"Added to 3 dashboards","description":"To preview the list of dashboards go to More settings."}]` | - |
+
+## Import
+
+```tsx
+import MetadataBar from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/MetadataBar/MetadataBar.stories.tsx).
+:::

docs/developer_docs/components/design-system/space.mdx

@@ -0,0 +1,168 @@
+---
+title: Space
+sidebar_label: Space
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# Space
+
+The Space component from Superset's UI library.
+
+## Live Example
+
+<StoryWithControls
+  component="Space"
+  props={{
+  direction: "horizontal",
+  size: "small",
+  wrap: false
+}}
+  controls={[
+  {
+    name: "direction",
+    label: "Direction",
+    type: "select",
+    options: [
+      "vertical",
+      "horizontal"
+    ]
+  },
+  {
+    name: "size",
+    label: "Size",
+    type: "select",
+    options: [
+      "small",
+      "middle",
+      "large"
+    ]
+  },
+  {
+    name: "wrap",
+    label: "Wrap",
+    type: "boolean"
+  },
+  {
+    name: "align",
+    label: "Align",
+    type: "select",
+    options: [
+      "start",
+      "end",
+      "center",
+      "baseline"
+    ]
+  }
+]}
+  sampleChildren={["Item 1","Item 2","Item 3","Item 4","Item 5"]}
+  sampleChildrenStyle={{padding:"8px 16px",background:"#e6f4ff",border:"1px solid #91caff",borderRadius:"4px"}}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <Space size="small">
+      {['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'].map(item => (
+        <div
+          key={item}
+          style={{
+            padding: '8px 16px',
+            background: '#e6f4ff',
+            border: '1px solid #91caff',
+            borderRadius: 4,
+          }}
+        >
+          {item}
+        </div>
+      ))}
+    </Space>
+  );
+}
+```
+
+## Vertical Space
+
+```tsx live
+function VerticalSpace() {
+  return (
+    <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
+      <Button buttonStyle="primary">Primary</Button>
+      <Button buttonStyle="secondary">Secondary</Button>
+      <Button buttonStyle="dashed">Dashed</Button>
+    </Space>
+  );
+}
+```
+
+## Space Sizes
+
+```tsx live
+function SpaceSizes() {
+  const items = ['Item 1', 'Item 2', 'Item 3'];
+  const itemStyle = {
+    padding: '8px 16px',
+    background: '#e6f4ff',
+    border: '1px solid #91caff',
+    borderRadius: 4,
+  };
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+      {['small', 'middle', 'large'].map(size => (
+        <div key={size}>
+          <h4>{size}</h4>
+          <Space size={size}>
+            {items.map(item => (
+              <div key={item} style={itemStyle}>{item}</div>
+            ))}
+          </Space>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `direction` | `string` | `"horizontal"` | - |
+| `size` | `string` | `"small"` | - |
+| `wrap` | `boolean` | `false` | - |
+
+## Import
+
+```tsx
+import { Space } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Space/Space.stories.tsx).
+:::

docs/developer_docs/components/design-system/table.mdx

@@ -0,0 +1,311 @@
+---
+title: Table
+sidebar_label: Table
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# Table
+
+A data table component with sorting, pagination, row selection, resizable columns, reorderable columns, and virtualization for large datasets.
+
+## Live Example
+
+<StoryWithControls
+  component="Table"
+  props={{
+  size: "small",
+  bordered: false,
+  loading: false,
+  sticky: true,
+  resizable: false,
+  reorderable: false,
+  usePagination: false,
+  key: 5,
+  name: "1GB USB Flash Drive",
+  category: "Portable Storage",
+  price: 9.99,
+  height: 350,
+  defaultPageSize: 5,
+  pageSizeOptions: [
+    "5",
+    "10"
+  ],
+  data: [
+    {
+      key: 1,
+      name: "Floppy Disk 10 pack",
+      category: "Disk Storage",
+      price: 9.99
+    },
+    {
+      key: 2,
+      name: "DVD 100 pack",
+      category: "Optical Storage",
+      price: 27.99
+    },
+    {
+      key: 3,
+      name: "128 GB SSD",
+      category: "Harddrive",
+      price: 49.99
+    },
+    {
+      key: 4,
+      name: "4GB 144mhz",
+      category: "Memory",
+      price: 19.99
+    },
+    {
+      key: 5,
+      name: "1GB USB Flash Drive",
+      category: "Portable Storage",
+      price: 9.99
+    },
+    {
+      key: 6,
+      name: "256 GB SSD",
+      category: "Harddrive",
+      price: 89.99
+    },
+    {
+      key: 7,
+      name: "1 TB SSD",
+      category: "Harddrive",
+      price: 349.99
+    },
+    {
+      key: 8,
+      name: "16 GB DDR4",
+      category: "Memory",
+      price: 59.99
+    },
+    {
+      key: 9,
+      name: "32 GB DDR5",
+      category: "Memory",
+      price: 129.99
+    },
+    {
+      key: 10,
+      name: "Blu-ray 50 pack",
+      category: "Optical Storage",
+      price: 34.99
+    },
+    {
+      key: 11,
+      name: "64 GB USB Drive",
+      category: "Portable Storage",
+      price: 14.99
+    },
+    {
+      key: 12,
+      name: "2 TB HDD",
+      category: "Harddrive",
+      price: 59.99
+    }
+  ],
+  columns: [
+    {
+      title: "Name",
+      dataIndex: "name",
+      key: "name",
+      width: 200
+    },
+    {
+      title: "Category",
+      dataIndex: "category",
+      key: "category",
+      width: 150
+    },
+    {
+      title: "Price",
+      dataIndex: "price",
+      key: "price",
+      width: 100
+    }
+  ]
+}}
+  controls={[
+  {
+    name: "size",
+    label: "Size",
+    type: "select",
+    options: [
+      "small",
+      "middle",
+      "large"
+    ],
+    description: "Table size."
+  },
+  {
+    name: "bordered",
+    label: "Bordered",
+    type: "boolean",
+    description: "Whether to show all table borders."
+  },
+  {
+    name: "loading",
+    label: "Loading",
+    type: "boolean",
+    description: "Whether the table is in a loading state."
+  },
+  {
+    name: "sticky",
+    label: "Sticky",
+    type: "boolean",
+    description: "Whether the table header is sticky."
+  },
+  {
+    name: "resizable",
+    label: "Resizable",
+    type: "boolean",
+    description: "Whether columns can be resized by dragging column edges."
+  },
+  {
+    name: "reorderable",
+    label: "Reorderable",
+    type: "boolean",
+    description: "EXPERIMENTAL: Whether columns can be reordered by dragging. May not work in all contexts."
+  },
+  {
+    name: "usePagination",
+    label: "Use Pagination",
+    type: "boolean",
+    description: "Whether to enable pagination. When enabled, the table displays 5 rows per page."
+  },
+  {
+    name: "key",
+    label: "Key",
+    type: "number"
+  },
+  {
+    name: "name",
+    label: "Name",
+    type: "text"
+  },
+  {
+    name: "category",
+    label: "Category",
+    type: "text"
+  },
+  {
+    name: "price",
+    label: "Price",
+    type: "number"
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  const data = [
+    { key: 1, name: 'PostgreSQL', type: 'Database', status: 'Active' },
+    { key: 2, name: 'MySQL', type: 'Database', status: 'Active' },
+    { key: 3, name: 'SQLite', type: 'Database', status: 'Inactive' },
+    { key: 4, name: 'Presto', type: 'Query Engine', status: 'Active' },
+  ];
+  const columns = [
+    { title: 'Name', dataIndex: 'name', key: 'name', width: 150 },
+    { title: 'Type', dataIndex: 'type', key: 'type' },
+    { title: 'Status', dataIndex: 'status', key: 'status', width: 100 },
+  ];
+  return <Table data={data} columns={columns} size="small" />;
+}
+```
+
+## With Pagination
+
+```tsx live
+function PaginatedTable() {
+  const data = Array.from({ length: 20 }, (_, i) => ({
+    key: i,
+    name: 'Record ' + (i + 1),
+    value: Math.round(Math.random() * 1000),
+    category: ['A', 'B', 'C'][i % 3],
+  }));
+  const columns = [
+    { title: 'Name', dataIndex: 'name', key: 'name' },
+    { title: 'Value', dataIndex: 'value', key: 'value', width: 100 },
+    { title: 'Category', dataIndex: 'category', key: 'category', width: 100 },
+  ];
+  return (
+    <Table
+      data={data}
+      columns={columns}
+      size="small"
+      pageSizeOptions={['5', '10']}
+      defaultPageSize={5}
+    />
+  );
+}
+```
+
+## Loading State
+
+```tsx live
+function LoadingTable() {
+  const columns = [
+    { title: 'Name', dataIndex: 'name', key: 'name' },
+    { title: 'Status', dataIndex: 'status', key: 'status' },
+  ];
+  return <Table data={[]} columns={columns} size="small" loading />;
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `string` | `"small"` | Table size. |
+| `bordered` | `boolean` | `false` | Whether to show all table borders. |
+| `loading` | `boolean` | `false` | Whether the table is in a loading state. |
+| `sticky` | `boolean` | `true` | Whether the table header is sticky. |
+| `resizable` | `boolean` | `false` | Whether columns can be resized by dragging column edges. |
+| `reorderable` | `boolean` | `false` | EXPERIMENTAL: Whether columns can be reordered by dragging. May not work in all contexts. |
+| `usePagination` | `boolean` | `false` | Whether to enable pagination. When enabled, the table displays 5 rows per page. |
+| `key` | `number` | `5` | - |
+| `name` | `string` | `"1GB USB Flash Drive"` | - |
+| `category` | `string` | `"Portable Storage"` | - |
+| `price` | `number` | `9.99` | - |
+| `height` | `number` | `350` | - |
+| `defaultPageSize` | `number` | `5` | - |
+| `pageSizeOptions` | `any` | `["5","10"]` | - |
+| `data` | `any` | `[{"key":1,"name":"Floppy Disk 10 pack","category":"Disk Storage","price":9.99},{"key":2,"name":"DVD 100 pack","category":"Optical Storage","price":27.99},{"key":3,"name":"128 GB SSD","category":"Harddrive","price":49.99},{"key":4,"name":"4GB 144mhz","category":"Memory","price":19.99},{"key":5,"name":"1GB USB Flash Drive","category":"Portable Storage","price":9.99},{"key":6,"name":"256 GB SSD","category":"Harddrive","price":89.99},{"key":7,"name":"1 TB SSD","category":"Harddrive","price":349.99},{"key":8,"name":"16 GB DDR4","category":"Memory","price":59.99},{"key":9,"name":"32 GB DDR5","category":"Memory","price":129.99},{"key":10,"name":"Blu-ray 50 pack","category":"Optical Storage","price":34.99},{"key":11,"name":"64 GB USB Drive","category":"Portable Storage","price":14.99},{"key":12,"name":"2 TB HDD","category":"Harddrive","price":59.99}]` | - |
+| `columns` | `any` | `[{"title":"Name","dataIndex":"name","key":"name","width":200},{"title":"Category","dataIndex":"category","key":"category","width":150},{"title":"Price","dataIndex":"price","key":"price","width":100}]` | - |
+
+## Import
+
+```tsx
+import { Table } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Table/Table.stories.tsx).
+:::

docs/developer_docs/components/index.mdx

@@ -0,0 +1,74 @@
+---
+title: UI Components Overview
+sidebar_label: Overview
+sidebar_position: 0
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+# Superset Design System
+
+A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.
+
+The Superset Design System uses [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) principles with adapted terminology:
+
+| Atomic Design | Atoms | Molecules | Organisms | Templates | Pages / Screens |
+|---|:---:|:---:|:---:|:---:|:---:|
+| **Superset Design** | Foundations | Components | Patterns | Templates | Features |
+
+<img src="/img/atomic-design.png" alt="Atoms = Foundations, Molecules = Components, Organisms = Patterns, Templates = Templates, Pages / Screens = Features" style={{maxWidth: '100%'}} />
+
+---
+
+## Component Library
+
+Interactive documentation for Superset's UI component library. **53 components** documented across 2 categories.
+
+### [Core Components](./ui/)
+46 components — Buttons, inputs, modals, selects, and other fundamental UI elements.
+
+### [Layout Components](./design-system/)
+7 components — Grid, Layout, Table, Flex, Space, and container components for page structure.
+
+
+## Usage
+
+All components are exported from `@superset-ui/core/components`:
+
+```tsx
+import { Button, Modal, Select } from '@superset-ui/core/components';
+```
+
+## Contributing
+
+This documentation is auto-generated from Storybook stories. To add or update component documentation:
+
+1. Create or update the component's `.stories.tsx` file
+2. Add a descriptive `title` and `description` in the story meta
+3. Export an interactive story with `args` for configurable props
+4. Run `yarn generate:superset-components` in the `docs/` directory
+
+:::info Work in Progress
+This component library is actively being documented. See the [Components TODO](./TODO) page for a list of components awaiting documentation.
+:::
+
+---
+
+*Auto-generated from Storybook stories in the [Design System/Introduction](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/DesignSystem.stories.tsx) story.*

docs/developer_docs/components/ui/autocomplete.mdx

@@ -0,0 +1,215 @@
+---
+title: AutoComplete
+sidebar_label: AutoComplete
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# AutoComplete
+
+AutoComplete component for search functionality.
+
+## Live Example
+
+<StoryWithControls
+  component="AutoComplete"
+  props={{
+  placeholder: "Type to search...",
+  options: [
+    {
+      value: "Dashboard",
+      label: "Dashboard"
+    },
+    {
+      value: "Chart",
+      label: "Chart"
+    },
+    {
+      value: "Dataset",
+      label: "Dataset"
+    },
+    {
+      value: "Database",
+      label: "Database"
+    },
+    {
+      value: "Query",
+      label: "Query"
+    }
+  ],
+  style: {
+    width: 300
+  },
+  filterOption: true
+}}
+  controls={[
+  {
+    name: "placeholder",
+    label: "Placeholder",
+    type: "text",
+    description: "Placeholder text for AutoComplete"
+  },
+  {
+    name: "style",
+    label: "Style",
+    type: "object",
+    description: "Custom styles for AutoComplete"
+  },
+  {
+    name: "value",
+    label: "Value",
+    type: "text",
+    description: "Selected option"
+  },
+  {
+    name: "disabled",
+    label: "Disabled",
+    type: "boolean",
+    description: "Disable the AutoComplete"
+  },
+  {
+    name: "popupMatchSelectWidth",
+    label: "Popup Match Select Width",
+    type: "number",
+    description: "Width of the dropdown"
+  },
+  {
+    name: "allowClear",
+    label: "Allow Clear",
+    type: "boolean",
+    description: "Show clear button"
+  },
+  {
+    name: "autoFocus",
+    label: "Auto Focus",
+    type: "boolean",
+    description: "If get focus when component mounted"
+  },
+  {
+    name: "backfill",
+    label: "Backfill",
+    type: "boolean",
+    description: "If backfill selected item the input when using keyboard"
+  },
+  {
+    name: "popupClassName",
+    label: "Popup Class Name",
+    type: "text",
+    description: "The className of dropdown menu"
+  },
+  {
+    name: "filterOption",
+    label: "Filter Option",
+    type: "boolean",
+    description: "Enable filtering of options based on input"
+  },
+  {
+    name: "notFoundContent",
+    label: "Not Found Content",
+    type: "text",
+    description: "Specify content to show when no result matches."
+  },
+  {
+    name: "open",
+    label: "Open",
+    type: "boolean",
+    description: "Controlled open state of dropdown"
+  },
+  {
+    name: "status",
+    label: "Status",
+    type: "select",
+    options: [
+      "error",
+      "warning"
+    ],
+    description: "Set validation status"
+  },
+  {
+    name: "size",
+    label: "Size",
+    type: "select",
+    options: [
+      "large",
+      "middle",
+      "small"
+    ],
+    description: "The size of the input box"
+  },
+  {
+    name: "variant",
+    label: "Variant",
+    type: "select",
+    options: [
+      "outlined",
+      "borderless",
+      "filled"
+    ],
+    description: "Variants of input"
+  },
+  {
+    name: "virtual",
+    label: "Virtual",
+    type: "boolean",
+    description: "Disable virtual scroll when set to false"
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <AutoComplete
+      placeholder="Type to search..."
+      options={[{"value":"Dashboard","label":"Dashboard"},{"value":"Chart","label":"Chart"},{"value":"Dataset","label":"Dataset"},{"value":"Database","label":"Database"},{"value":"Query","label":"Query"}]}
+      style={{"width":300}}
+      filterOption
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `placeholder` | `string` | `"Type to search..."` | Placeholder text for AutoComplete |
+| `options` | `any` | `[{"value":"Dashboard","label":"Dashboard"},{"value":"Chart","label":"Chart"},{"value":"Dataset","label":"Dataset"},{"value":"Database","label":"Database"},{"value":"Query","label":"Query"}]` | The dropdown options |
+| `style` | `any` | `{"width":300}` | Custom styles for AutoComplete |
+| `filterOption` | `boolean` | `true` | Enable filtering of options based on input |
+
+## Import
+
+```tsx
+import { AutoComplete } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/AutoComplete/AutoComplete.stories.tsx).
+:::

docs/developer_docs/components/ui/avatar.mdx

@@ -0,0 +1,140 @@
+---
+title: Avatar
+sidebar_label: Avatar
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# Avatar
+
+The Avatar component from Superset's UI library.
+
+## Live Example
+
+<StoryWithControls
+  component="Avatar"
+  props={{
+  children: "AB",
+  alt: "",
+  gap: 4,
+  shape: "circle",
+  size: "default",
+  src: "",
+  draggable: false
+}}
+  controls={[
+  {
+    name: "children",
+    label: "Children",
+    type: "text",
+    description: "Text or initials to display inside the avatar."
+  },
+  {
+    name: "alt",
+    label: "Alt",
+    type: "text"
+  },
+  {
+    name: "gap",
+    label: "Gap",
+    type: "number",
+    description: "Letter spacing inside the avatar."
+  },
+  {
+    name: "shape",
+    label: "Shape",
+    type: "select",
+    options: [
+      "circle",
+      "square"
+    ],
+    description: "The shape of the avatar."
+  },
+  {
+    name: "size",
+    label: "Size",
+    type: "select",
+    options: [
+      "small",
+      "default",
+      "large"
+    ],
+    description: "The size of the avatar."
+  },
+  {
+    name: "src",
+    label: "Src",
+    type: "text",
+    description: "Image URL for the avatar. If provided, overrides children."
+  },
+  {
+    name: "draggable",
+    label: "Draggable",
+    type: "boolean"
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <Avatar
+      alt=""
+      gap={4}
+      shape="circle"
+      size="default"
+      src=""
+    >
+      AB
+    </Avatar>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `string` | `"AB"` | Text or initials to display inside the avatar. |
+| `alt` | `string` | `""` | - |
+| `gap` | `number` | `4` | Letter spacing inside the avatar. |
+| `shape` | `string` | `"circle"` | The shape of the avatar. |
+| `size` | `string` | `"default"` | The size of the avatar. |
+| `src` | `string` | `""` | Image URL for the avatar. If provided, overrides children. |
+| `draggable` | `boolean` | `false` | - |
+
+## Import
+
+```tsx
+import { Avatar } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Avatar/Avatar.stories.tsx).
+:::

docs/developer_docs/components/ui/badge.mdx

@@ -0,0 +1,160 @@
+---
+title: Badge
+sidebar_label: Badge
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# Badge
+
+The Badge component from Superset's UI library.
+
+## Live Example
+
+<StoryWithControls
+  component="Badge"
+  props={{
+  count: 5,
+  size: "default",
+  showZero: false,
+  overflowCount: 99
+}}
+  controls={[
+  {
+    name: "count",
+    label: "Count",
+    type: "number",
+    description: "Number to show in the badge."
+  },
+  {
+    name: "size",
+    label: "Size",
+    type: "select",
+    options: [
+      "default",
+      "small"
+    ],
+    description: "Size of the badge."
+  },
+  {
+    name: "showZero",
+    label: "Show Zero",
+    type: "boolean",
+    description: "Whether to show badge when count is zero."
+  },
+  {
+    name: "overflowCount",
+    label: "Overflow Count",
+    type: "number",
+    description: "Max count to show. Shows count+ when exceeded (e.g., 99+)."
+  },
+  {
+    name: "color",
+    label: "Color",
+    type: "select",
+    options: [
+      "pink",
+      "red",
+      "yellow",
+      "orange",
+      "cyan",
+      "green",
+      "blue",
+      "purple",
+      "geekblue",
+      "magenta",
+      "volcano",
+      "gold",
+      "lime"
+    ],
+    description: "Custom background color for the badge."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <Badge
+      count={5}
+      size="default"
+      overflowCount={99}
+    />
+  );
+}
+```
+
+## Status Badge
+
+```tsx live
+function StatusBadgeDemo() {
+  const statuses = ['default', 'success', 'processing', 'warning', 'error'];
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      {statuses.map(status => (
+        <Badge key={status} status={status} text={`Status: ${status}`} />
+      ))}
+    </div>
+  );
+}
+```
+
+## Color Gallery
+
+```tsx live
+function ColorGallery() {
+  const colors = ['pink', 'red', 'orange', 'green', 'cyan', 'blue', 'purple'];
+  return (
+    <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
+      {colors.map(color => (
+        <Badge key={color} count={9} color={color} />
+      ))}
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `count` | `number` | `5` | Number to show in the badge. |
+| `size` | `string` | `"default"` | Size of the badge. |
+| `showZero` | `boolean` | `false` | Whether to show badge when count is zero. |
+| `overflowCount` | `number` | `99` | Max count to show. Shows count+ when exceeded (e.g., 99+). |
+
+## Import
+
+```tsx
+import { Badge } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Badge/Badge.stories.tsx).
+:::

docs/developer_docs/components/ui/breadcrumb.mdx

@@ -0,0 +1,93 @@
+---
+title: Breadcrumb
+sidebar_label: Breadcrumb
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# Breadcrumb
+
+Breadcrumb component for displaying navigation paths.
+
+## Live Example
+
+<StoryWithControls
+  component="Breadcrumb"
+  props={{
+  items: [
+    {
+      title: "Home",
+      href: "/"
+    },
+    {
+      title: "Library",
+      href: "/library"
+    },
+    {
+      title: "Data"
+    }
+  ],
+  separator: "/"
+}}
+  controls={[
+  {
+    name: "separator",
+    label: "Separator",
+    type: "text",
+    description: "Custom separator between items"
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <Breadcrumb
+      items={[
+        { title: 'Home', href: '/' },
+        { title: 'Library', href: '/library' },
+        { title: 'Data' },
+      ]}
+      separator="/"
+    />
+  );
+}
+```
+
+
+
+## Import
+
+```tsx
+import { Breadcrumb } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Breadcrumb/Breadcrumb.stories.tsx).
+:::

docs/developer_docs/components/ui/button.mdx

@@ -0,0 +1,142 @@
+---
+title: Button
+sidebar_label: Button
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls, ComponentGallery } from '../../../src/components/StorybookWrapper';
+
+# Button
+
+The Button component from Superset's UI library.
+
+## All Variants
+
+<ComponentGallery
+  component="Button"
+  sizes={["xsmall","small","default"]}
+  styles={["primary","secondary","dashed","danger","link"]}
+  sizeProp="buttonSize"
+  styleProp="buttonStyle"
+/>
+
+## Live Example
+
+<StoryWithControls
+  component="Button"
+  props={{
+  buttonStyle: "default",
+  buttonSize: "default",
+  children: "Button!"
+}}
+  controls={[
+  {
+    name: "buttonStyle",
+    label: "Button Style",
+    type: "select",
+    options: [
+      "primary",
+      "secondary",
+      "dashed",
+      "danger",
+      "link"
+    ],
+    description: "The style variant of the button."
+  },
+  {
+    name: "buttonSize",
+    label: "Button Size",
+    type: "select",
+    options: [
+      "xsmall",
+      "small",
+      "default"
+    ],
+    description: "The size of the button."
+  },
+  {
+    name: "children",
+    label: "Children",
+    type: "text",
+    description: "The button text or content."
+  },
+  {
+    name: "target",
+    label: "Target",
+    type: "select"
+  },
+  {
+    name: "href",
+    label: "Href",
+    type: "select"
+  },
+  {
+    name: "disabled",
+    label: "Disabled",
+    type: "boolean",
+    description: "Whether the button is disabled."
+  },
+  {
+    name: "loading",
+    label: "Loading",
+    type: "boolean",
+    description: "Whether to show loading spinner."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <Button
+      buttonStyle="default"
+      buttonSize="default"
+    >
+      Button!
+    </Button>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `buttonStyle` | `string` | `"default"` | The style variant of the button. |
+| `buttonSize` | `string` | `"default"` | The size of the button. |
+| `children` | `string` | `"Button!"` | The button text or content. |
+
+## Import
+
+```tsx
+import { Button } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Button/Button.stories.tsx).
+:::

docs/developer_docs/components/ui/buttongroup.mdx

@@ -0,0 +1,88 @@
+---
+title: ButtonGroup
+sidebar_label: ButtonGroup
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# ButtonGroup
+
+ButtonGroup is a container that groups multiple Button components together with consistent spacing and styling.
+
+## Live Example
+
+<StoryWithControls
+  component="ButtonGroup"
+  props={{
+  expand: false
+}}
+  controls={[
+  {
+    name: "expand",
+    label: "Expand",
+    type: "boolean",
+    description: "When true, buttons expand to fill available width."
+  },
+  {
+    name: "className",
+    label: "Class Name",
+    type: "text",
+    description: "CSS class name for custom styling."
+  }
+]}
+  sampleChildren={[{"component":"Button","props":{"buttonStyle":"tertiary","children":"Button 1"}},{"component":"Button","props":{"buttonStyle":"tertiary","children":"Button 2"}},{"component":"Button","props":{"buttonStyle":"tertiary","children":"Button 3"}}]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <ButtonGroup>
+      <Button buttonStyle="tertiary">Button 1</Button>
+      <Button buttonStyle="tertiary">Button 2</Button>
+      <Button buttonStyle="tertiary">Button 3</Button>
+    </ButtonGroup>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `expand` | `boolean` | `false` | When true, buttons expand to fill available width. |
+
+## Import
+
+```tsx
+import { ButtonGroup } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/ButtonGroup/ButtonGroup.stories.tsx).
+:::

docs/developer_docs/components/ui/cachedlabel.mdx

@@ -0,0 +1,79 @@
+---
+title: CachedLabel
+sidebar_label: CachedLabel
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# CachedLabel
+
+The CachedLabel component from Superset's UI library.
+
+## Live Example
+
+<StoryWithControls
+  component="CachedLabel"
+  props={{}}
+  controls={[
+  {
+    name: "cachedTimestamp",
+    label: "Cached Timestamp",
+    type: "text",
+    description: "ISO timestamp of when the data was cached"
+  },
+  {
+    name: "className",
+    label: "Class Name",
+    type: "text",
+    description: "Additional CSS class for the label"
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <CachedLabel
+      // Add props here
+    />
+  );
+}
+```
+
+
+
+## Import
+
+```tsx
+import { CachedLabel } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/CachedLabel/CachedLabel.stories.tsx).
+:::

docs/developer_docs/components/ui/card.mdx

@@ -0,0 +1,142 @@
+---
+title: Card
+sidebar_label: Card
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# Card
+
+A container component for grouping related content. Supports titles, borders, loading states, and hover effects.
+
+## Live Example
+
+<StoryWithControls
+  component="Card"
+  props={{
+  padded: true,
+  title: "Dashboard Overview",
+  children: "This card displays a summary of your dashboard metrics and recent activity.",
+  bordered: true,
+  loading: false,
+  hoverable: false
+}}
+  controls={[
+  {
+    name: "padded",
+    label: "Padded",
+    type: "boolean",
+    description: "Whether the card content has padding."
+  },
+  {
+    name: "title",
+    label: "Title",
+    type: "text",
+    description: "Title text displayed at the top of the card."
+  },
+  {
+    name: "children",
+    label: "Children",
+    type: "text",
+    description: "The content inside the card."
+  },
+  {
+    name: "bordered",
+    label: "Bordered",
+    type: "boolean",
+    description: "Whether to show a border around the card."
+  },
+  {
+    name: "loading",
+    label: "Loading",
+    type: "boolean",
+    description: "Whether to show a loading skeleton."
+  },
+  {
+    name: "hoverable",
+    label: "Hoverable",
+    type: "boolean",
+    description: "Whether the card lifts on hover."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <Card title="Dashboard Overview" bordered>
+      This card displays a summary of your dashboard metrics and recent activity.
+    </Card>
+  );
+}
+```
+
+## Card States
+
+```tsx live
+function CardStates() {
+  return (
+    <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
+      <Card title="Default" bordered style={{ width: 250 }}>
+        Default card content.
+      </Card>
+      <Card title="Hoverable" bordered hoverable style={{ width: 250 }}>
+        Hover over this card.
+      </Card>
+      <Card title="Loading" bordered loading style={{ width: 250 }}>
+        This content is hidden while loading.
+      </Card>
+      <Card title="No Border" style={{ width: 250 }}>
+        Borderless card.
+      </Card>
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `padded` | `boolean` | `true` | Whether the card content has padding. |
+| `title` | `string` | `"Dashboard Overview"` | Title text displayed at the top of the card. |
+| `children` | `string` | `"This card displays a summary of your dashboard metrics and recent activity."` | The content inside the card. |
+| `bordered` | `boolean` | `true` | Whether to show a border around the card. |
+| `loading` | `boolean` | `false` | Whether to show a loading skeleton. |
+| `hoverable` | `boolean` | `false` | Whether the card lifts on hover. |
+
+## Import
+
+```tsx
+import { Card } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Card/Card.stories.tsx).
+:::

docs/developer_docs/components/ui/checkbox.mdx

@@ -0,0 +1,141 @@
+---
+title: Checkbox
+sidebar_label: Checkbox
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# Checkbox
+
+Checkbox component that supports both regular and indeterminate states, built on top of Ant Design v5 Checkbox.
+
+## Live Example
+
+<StoryWithControls
+  component="Checkbox"
+  props={{
+  checked: false,
+  indeterminate: false
+}}
+  controls={[
+  {
+    name: "checked",
+    label: "Checked",
+    type: "boolean",
+    description: "Whether the checkbox is checked."
+  },
+  {
+    name: "indeterminate",
+    label: "Indeterminate",
+    type: "boolean",
+    description: "Whether the checkbox is in indeterminate state (partially selected)."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <Checkbox
+      // Add props here
+    />
+  );
+}
+```
+
+## All Checkbox States
+
+```tsx live
+function AllStates() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <Checkbox checked={false}>Unchecked</Checkbox>
+      <Checkbox checked={true}>Checked</Checkbox>
+      <Checkbox indeterminate={true}>Indeterminate</Checkbox>
+      <Checkbox disabled>Disabled unchecked</Checkbox>
+      <Checkbox disabled checked>Disabled checked</Checkbox>
+    </div>
+  );
+}
+```
+
+## Select All Pattern
+
+```tsx live
+function SelectAllDemo() {
+  const [selected, setSelected] = React.useState([]);
+  const options = ['Option A', 'Option B', 'Option C'];
+
+  const allSelected = selected.length === options.length;
+  const indeterminate = selected.length > 0 && !allSelected;
+
+  return (
+    <div>
+      <Checkbox
+        checked={allSelected}
+        indeterminate={indeterminate}
+        onChange={(e) => setSelected(e.target.checked ? [...options] : [])}
+      >
+        Select All
+      </Checkbox>
+      <div style={{ marginLeft: 24, marginTop: 8 }}>
+        {options.map(opt => (
+          <div key={opt}>
+            <Checkbox
+              checked={selected.includes(opt)}
+              onChange={() => setSelected(prev =>
+                prev.includes(opt) ? prev.filter(x => x !== opt) : [...prev, opt]
+              )}
+            >
+              {opt}
+            </Checkbox>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `checked` | `boolean` | `false` | Whether the checkbox is checked. |
+| `indeterminate` | `boolean` | `false` | Whether the checkbox is in indeterminate state (partially selected). |
+
+## Import
+
+```tsx
+import { Checkbox } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Checkbox/Checkbox.stories.tsx).
+:::

docs/developer_docs/components/ui/collapse.mdx

@@ -0,0 +1,106 @@
+---
+title: Collapse
+sidebar_label: Collapse
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# Collapse
+
+The Collapse component from Superset's UI library.
+
+## Live Example
+
+<StoryWithControls
+  component="Collapse"
+  props={{
+  ghost: false,
+  bordered: true,
+  accordion: false,
+  animateArrows: false,
+  modalMode: false
+}}
+  controls={[
+  {
+    name: "ghost",
+    label: "Ghost",
+    type: "boolean"
+  },
+  {
+    name: "bordered",
+    label: "Bordered",
+    type: "boolean"
+  },
+  {
+    name: "accordion",
+    label: "Accordion",
+    type: "boolean"
+  },
+  {
+    name: "animateArrows",
+    label: "Animate Arrows",
+    type: "boolean"
+  },
+  {
+    name: "modalMode",
+    label: "Modal Mode",
+    type: "boolean"
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <Collapse
+      bordered
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `ghost` | `boolean` | `false` | - |
+| `bordered` | `boolean` | `true` | - |
+| `accordion` | `boolean` | `false` | - |
+| `animateArrows` | `boolean` | `false` | - |
+| `modalMode` | `boolean` | `false` | - |
+
+## Import
+
+```tsx
+import { Collapse } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Collapse/Collapse.stories.tsx).
+:::

docs/developer_docs/components/ui/datepicker.mdx

@@ -0,0 +1,110 @@
+---
+title: DatePicker
+sidebar_label: DatePicker
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# DatePicker
+
+The DatePicker component from Superset's UI library.
+
+## Live Example
+
+<StoryWithControls
+  component="DatePicker"
+  props={{
+  placeholder: "Select date",
+  showNow: true,
+  allowClear: false,
+  autoFocus: true,
+  disabled: false,
+  format: "YYYY-MM-DD hh:mm a",
+  inputReadOnly: false,
+  picker: "date",
+  placement: "bottomLeft",
+  size: "middle",
+  showTime: {
+    format: "hh:mm a",
+    needConfirm: false
+  }
+}}
+  controls={[
+  {
+    name: "placeholder",
+    label: "Placeholder",
+    type: "text"
+  },
+  {
+    name: "showNow",
+    label: "Show Now",
+    type: "boolean",
+    description: "Show \"Now\" button to select current date and time."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <DatePicker
+      placeholder="Select date"
+      format="YYYY-MM-DD hh:mm a"
+      showNow
+      showTime={{ format: 'hh:mm a', needConfirm: false }}
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `placeholder` | `string` | `"Select date"` | - |
+| `showNow` | `boolean` | `true` | Show "Now" button to select current date and time. |
+| `allowClear` | `boolean` | `false` | - |
+| `autoFocus` | `boolean` | `true` | - |
+| `disabled` | `boolean` | `false` | - |
+| `format` | `string` | `"YYYY-MM-DD hh:mm a"` | - |
+| `inputReadOnly` | `boolean` | `false` | - |
+| `picker` | `string` | `"date"` | - |
+| `placement` | `string` | `"bottomLeft"` | - |
+| `size` | `string` | `"middle"` | - |
+| `showTime` | `any` | `{"format":"hh:mm a","needConfirm":false}` | - |
+
+## Import
+
+```tsx
+import { DatePicker } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/DatePicker/DatePicker.stories.tsx).
+:::

docs/developer_docs/components/ui/divider.mdx

@@ -0,0 +1,144 @@
+---
+title: Divider
+sidebar_label: Divider
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# Divider
+
+The Divider component from Superset's UI library.
+
+## Live Example
+
+<StoryWithControls
+  component="Divider"
+  props={{
+  dashed: false,
+  variant: "solid",
+  orientation: "center",
+  orientationMargin: "",
+  plain: true,
+  type: "horizontal"
+}}
+  controls={[
+  {
+    name: "dashed",
+    label: "Dashed",
+    type: "boolean",
+    description: "Whether line is dashed (deprecated, use variant)."
+  },
+  {
+    name: "variant",
+    label: "Variant",
+    type: "select",
+    options: [
+      "dashed",
+      "dotted",
+      "solid"
+    ],
+    description: "Line style of the divider."
+  },
+  {
+    name: "orientation",
+    label: "Orientation",
+    type: "select",
+    options: [
+      "left",
+      "right",
+      "center"
+    ],
+    description: "Position of title inside divider."
+  },
+  {
+    name: "orientationMargin",
+    label: "Orientation Margin",
+    type: "text",
+    description: "Margin from divider edge to title."
+  },
+  {
+    name: "plain",
+    label: "Plain",
+    type: "boolean",
+    description: "Use plain style without bold title."
+  },
+  {
+    name: "type",
+    label: "Type",
+    type: "select",
+    options: [
+      "horizontal",
+      "vertical"
+    ],
+    description: "Direction of the divider."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <>
+      <p>Horizontal divider with title (orientationMargin applies here):</p>
+      <Divider orientation="left" orientationMargin={0}>Left Title</Divider>
+      <Divider orientation="right" orientationMargin={50}>Right Title</Divider>
+      <Divider>Center Title</Divider>
+      <p>Vertical divider (use container gap for spacing):</p>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+        <span>Link</span>
+        <Divider type="vertical" />
+        <span>Link</span>
+        <Divider type="vertical" />
+        <span>Link</span>
+      </div>
+    </>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `dashed` | `boolean` | `false` | Whether line is dashed (deprecated, use variant). |
+| `variant` | `string` | `"solid"` | Line style of the divider. |
+| `orientation` | `string` | `"center"` | Position of title inside divider. |
+| `orientationMargin` | `string` | `""` | Margin from divider edge to title. |
+| `plain` | `boolean` | `true` | Use plain style without bold title. |
+| `type` | `string` | `"horizontal"` | Direction of the divider. |
+
+## Import
+
+```tsx
+import { Divider } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Divider/Divider.stories.tsx).
+:::

docs/developer_docs/components/ui/editabletitle.mdx

@@ -0,0 +1,172 @@
+---
+title: EditableTitle
+sidebar_label: EditableTitle
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# EditableTitle
+
+The EditableTitle component from Superset's UI library.
+
+## Live Example
+
+<StoryWithControls
+  component="EditableTitle"
+  props={{
+  canEdit: true,
+  editing: false,
+  emptyText: "Empty text",
+  noPermitTooltip: "Not permitted",
+  showTooltip: true,
+  title: "Title",
+  defaultTitle: "Default title",
+  placeholder: "Placeholder",
+  certifiedBy: "",
+  certificationDetails: "",
+  maxWidth: 100,
+  autoSize: true
+}}
+  controls={[
+  {
+    name: "canEdit",
+    label: "Can Edit",
+    type: "boolean",
+    description: "Whether the title can be edited."
+  },
+  {
+    name: "editing",
+    label: "Editing",
+    type: "boolean",
+    description: "Whether the title is currently in edit mode."
+  },
+  {
+    name: "emptyText",
+    label: "Empty Text",
+    type: "text",
+    description: "Text to display when title is empty."
+  },
+  {
+    name: "noPermitTooltip",
+    label: "No Permit Tooltip",
+    type: "text",
+    description: "Tooltip shown when user lacks edit permission."
+  },
+  {
+    name: "showTooltip",
+    label: "Show Tooltip",
+    type: "boolean",
+    description: "Whether to show tooltip on hover."
+  },
+  {
+    name: "title",
+    label: "Title",
+    type: "text",
+    description: "The title text to display."
+  },
+  {
+    name: "defaultTitle",
+    label: "Default Title",
+    type: "text",
+    description: "Default title when none is provided."
+  },
+  {
+    name: "placeholder",
+    label: "Placeholder",
+    type: "text",
+    description: "Placeholder text when editing."
+  },
+  {
+    name: "certifiedBy",
+    label: "Certified By",
+    type: "text",
+    description: "Name of person/team who certified this item."
+  },
+  {
+    name: "certificationDetails",
+    label: "Certification Details",
+    type: "text",
+    description: "Additional certification details or description."
+  },
+  {
+    name: "maxWidth",
+    label: "Max Width",
+    type: "number",
+    description: "Maximum width of the title in pixels."
+  },
+  {
+    name: "autoSize",
+    label: "Auto Size",
+    type: "boolean",
+    description: "Whether to auto-size based on content."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <EditableTitle
+      title="My Dashboard"
+      canEdit
+      showTooltip
+      certifiedBy="Data Team"
+      certificationDetails="Verified Q1 2024"
+      onSaveTitle={(newTitle) => console.log('Saved:', newTitle)}
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `canEdit` | `boolean` | `true` | Whether the title can be edited. |
+| `editing` | `boolean` | `false` | Whether the title is currently in edit mode. |
+| `emptyText` | `string` | `"Empty text"` | Text to display when title is empty. |
+| `noPermitTooltip` | `string` | `"Not permitted"` | Tooltip shown when user lacks edit permission. |
+| `showTooltip` | `boolean` | `true` | Whether to show tooltip on hover. |
+| `title` | `string` | `"Title"` | The title text to display. |
+| `defaultTitle` | `string` | `"Default title"` | Default title when none is provided. |
+| `placeholder` | `string` | `"Placeholder"` | Placeholder text when editing. |
+| `certifiedBy` | `string` | `""` | Name of person/team who certified this item. |
+| `certificationDetails` | `string` | `""` | Additional certification details or description. |
+| `maxWidth` | `number` | `100` | Maximum width of the title in pixels. |
+| `autoSize` | `boolean` | `true` | Whether to auto-size based on content. |
+
+## Import
+
+```tsx
+import { EditableTitle } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/EditableTitle/EditableTitle.stories.tsx).
+:::

docs/developer_docs/components/ui/emptystate.mdx

@@ -0,0 +1,147 @@
+---
+title: EmptyState
+sidebar_label: EmptyState
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls, ComponentGallery } from '../../../src/components/StorybookWrapper';
+
+# EmptyState
+
+The EmptyState component from Superset's UI library.
+
+## All Variants
+
+<ComponentGallery
+  component="EmptyState"
+  sizes={["medium"]}
+  styles={["chart.svg","document.svg","empty-charts.svg","empty-dashboard.svg","empty-dataset.svg","empty-query.svg","empty-table.svg","empty.svg","empty_sql_chart.svg","filter-results.svg","filter.svg","star-circle.svg","union.svg","vector.svg"]}
+  sizeProp="size"
+  styleProp="image"
+/>
+
+## Live Example
+
+<StoryWithControls
+  component="EmptyState"
+  props={{
+  size: "medium",
+  title: "No Data Available",
+  description: "There is no data to display at this time.",
+  image: "empty.svg",
+  buttonText: ""
+}}
+  controls={[
+  {
+    name: "size",
+    label: "Size",
+    type: "select",
+    options: [
+      "small",
+      "medium",
+      "large"
+    ],
+    description: "Size of the empty state component."
+  },
+  {
+    name: "title",
+    label: "Title",
+    type: "text",
+    description: "Main title text."
+  },
+  {
+    name: "description",
+    label: "Description",
+    type: "text",
+    description: "Description text below the title."
+  },
+  {
+    name: "image",
+    label: "Image",
+    type: "select",
+    options: [
+      "chart.svg",
+      "document.svg",
+      "empty-charts.svg",
+      "empty-dashboard.svg",
+      "empty-dataset.svg",
+      "empty-query.svg",
+      "empty-table.svg",
+      "empty.svg",
+      "empty_sql_chart.svg",
+      "filter-results.svg",
+      "filter.svg",
+      "star-circle.svg",
+      "union.svg",
+      "vector.svg"
+    ],
+    description: "Predefined image to display."
+  },
+  {
+    name: "buttonText",
+    label: "Button Text",
+    type: "text",
+    description: "Text for optional action button."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <EmptyState
+      size="medium"
+      title="No Results Found"
+      description="Try adjusting your filters or search terms."
+      image="filter.svg"
+      buttonText="Clear Filters"
+      buttonAction={() => alert('Filters cleared!')}
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `string` | `"medium"` | Size of the empty state component. |
+| `title` | `string` | `"No Data Available"` | Main title text. |
+| `description` | `string` | `"There is no data to display at this time."` | Description text below the title. |
+| `image` | `string` | `"empty.svg"` | Predefined image to display. |
+| `buttonText` | `string` | `""` | Text for optional action button. |
+
+## Import
+
+```tsx
+import { EmptyState } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/EmptyState/EmptyState.stories.tsx).
+:::

docs/developer_docs/components/ui/favestar.mdx

@@ -0,0 +1,96 @@
+---
+title: FaveStar
+sidebar_label: FaveStar
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# FaveStar
+
+FaveStar component for marking items as favorites
+
+## Live Example
+
+<StoryWithControls
+  component="FaveStar"
+  props={{
+  itemId: 1,
+  isStarred: false,
+  showTooltip: true
+}}
+  controls={[
+  {
+    name: "itemId",
+    label: "Item ID",
+    type: "number",
+    description: "Unique identifier for the item"
+  },
+  {
+    name: "isStarred",
+    label: "Is Starred",
+    type: "boolean",
+    description: "Whether the item is currently starred."
+  },
+  {
+    name: "showTooltip",
+    label: "Show Tooltip",
+    type: "boolean",
+    description: "Show tooltip on hover."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <FaveStar
+      itemId={1}
+      showTooltip
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `itemId` | `number` | `1` | Unique identifier for the item |
+| `isStarred` | `boolean` | `false` | Whether the item is currently starred. |
+| `showTooltip` | `boolean` | `true` | Show tooltip on hover. |
+
+## Import
+
+```tsx
+import { FaveStar } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/FaveStar/FaveStar.stories.tsx).
+:::

docs/developer_docs/components/ui/iconbutton.mdx

@@ -0,0 +1,106 @@
+---
+title: IconButton
+sidebar_label: IconButton
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# IconButton
+
+The IconButton component is a versatile button that allows you to combine an icon with a text label. It is designed for use in situations where you want to display an icon along with some text in a single clickable element.
+
+## Live Example
+
+<StoryWithControls
+  component="IconButton"
+  props={{
+  buttonText: "IconButton",
+  altText: "Icon button alt text",
+  padded: true,
+  icon: "https://superset.apache.org/img/superset-logo-horiz.svg"
+}}
+  controls={[
+  {
+    name: "buttonText",
+    label: "Button Text",
+    type: "text",
+    description: "The text inside the button."
+  },
+  {
+    name: "altText",
+    label: "Alt Text",
+    type: "text",
+    description: "The alt text for the button. If not provided, the button text is used as the alt text by default."
+  },
+  {
+    name: "padded",
+    label: "Padded",
+    type: "boolean",
+    description: "Add padding between icon and button text."
+  },
+  {
+    name: "icon",
+    label: "Icon",
+    type: "text",
+    description: "Icon inside the button (URL or path)."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <IconButton
+      buttonText="IconButton"
+      altText="Icon button alt text"
+      padded
+      icon="https://superset.apache.org/img/superset-logo-horiz.svg"
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `buttonText` | `string` | `"IconButton"` | The text inside the button. |
+| `altText` | `string` | `"Icon button alt text"` | The alt text for the button. If not provided, the button text is used as the alt text by default. |
+| `padded` | `boolean` | `true` | Add padding between icon and button text. |
+| `icon` | `string` | `"https://superset.apache.org/img/superset-logo-horiz.svg"` | Icon inside the button (URL or path). |
+
+## Import
+
+```tsx
+import { IconButton } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/IconButton/IconButton.stories.tsx).
+:::

docs/developer_docs/components/ui/icons.mdx

@@ -0,0 +1,252 @@
+---
+title: Icons
+sidebar_label: Icons
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# Icons
+
+Icon library for Apache Superset. Contains over 200 icons based on Ant Design icons with consistent sizing and theming support.
+
+## Live Example
+
+<StoryWithControls
+  component="Icons"
+  renderComponent="Icons.InfoCircleOutlined"
+  props={{
+  iconSize: "xl"
+}}
+  controls={[
+  {
+    name: "iconSize",
+    label: "Icon Size",
+    type: "inline-radio",
+    options: [
+      "s",
+      "m",
+      "l",
+      "xl",
+      "xxl"
+    ],
+    description: "Size of the icons: s (12px), m (16px), l (20px), xl (24px), xxl (32px)."
+  },
+  {
+    name: "showNames",
+    label: "Show Names",
+    type: "boolean"
+  },
+  {
+    name: "iconColor",
+    label: "Icon Color",
+    type: "select"
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
+      <Icons.InfoCircleOutlined iconSize="xl" />
+      <Icons.CheckCircleOutlined iconSize="xl" />
+      <Icons.WarningOutlined iconSize="xl" />
+      <Icons.CloseCircleOutlined iconSize="xl" />
+    </div>
+  );
+}
+```
+
+## Icon Sizes
+
+```tsx live
+function IconSizes() {
+  const sizes = ['s', 'm', 'l', 'xl', 'xxl'];
+  return (
+    <div style={{ display: 'flex', gap: 24, alignItems: 'end' }}>
+      {sizes.map(size => (
+        <div key={size} style={{ textAlign: 'center' }}>
+          <Icons.DatabaseOutlined iconSize={size} />
+          <div style={{ fontSize: 12, marginTop: 8, color: '#666' }}>{size}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+## Icon Gallery
+
+```tsx live
+function IconGallery() {
+  const Section = ({ title, children }) => (
+    <div style={{ marginBottom: 24 }}>
+      <div style={{ fontWeight: 600, marginBottom: 8, color: '#666' }}>{title}</div>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16 }}>{children}</div>
+    </div>
+  );
+  return (
+    <div>
+      <Section title="Charts">
+        <Icons.LineChartOutlined iconSize="xl" />
+        <Icons.BarChartOutlined iconSize="xl" />
+        <Icons.PieChartOutlined iconSize="xl" />
+        <Icons.AreaChartOutlined iconSize="xl" />
+        <Icons.DashboardOutlined iconSize="xl" />
+        <Icons.FundProjectionScreenOutlined iconSize="xl" />
+      </Section>
+      <Section title="Data">
+        <Icons.DatabaseOutlined iconSize="xl" />
+        <Icons.TableOutlined iconSize="xl" />
+        <Icons.ConsoleSqlOutlined iconSize="xl" />
+        <Icons.FilterOutlined iconSize="xl" />
+        <Icons.FieldNumberOutlined iconSize="xl" />
+        <Icons.FieldTimeOutlined iconSize="xl" />
+        <Icons.FunctionOutlined iconSize="xl" />
+        <Icons.CalculatorOutlined iconSize="xl" />
+      </Section>
+      <Section title="Actions">
+        <Icons.PlusOutlined iconSize="xl" />
+        <Icons.EditOutlined iconSize="xl" />
+        <Icons.DeleteOutlined iconSize="xl" />
+        <Icons.CopyOutlined iconSize="xl" />
+        <Icons.SaveOutlined iconSize="xl" />
+        <Icons.DownloadOutlined iconSize="xl" />
+        <Icons.UploadOutlined iconSize="xl" />
+        <Icons.ReloadOutlined iconSize="xl" />
+        <Icons.SyncOutlined iconSize="xl" />
+        <Icons.SearchOutlined iconSize="xl" />
+        <Icons.ExpandOutlined iconSize="xl" />
+        <Icons.FullscreenOutlined iconSize="xl" />
+        <Icons.ShareAltOutlined iconSize="xl" />
+        <Icons.ExportOutlined iconSize="xl" />
+      </Section>
+      <Section title="Status">
+        <Icons.CheckOutlined iconSize="xl" />
+        <Icons.CheckCircleOutlined iconSize="xl" />
+        <Icons.CloseOutlined iconSize="xl" />
+        <Icons.CloseCircleOutlined iconSize="xl" />
+        <Icons.InfoCircleOutlined iconSize="xl" />
+        <Icons.WarningOutlined iconSize="xl" />
+        <Icons.ExclamationCircleOutlined iconSize="xl" />
+        <Icons.QuestionCircleOutlined iconSize="xl" />
+        <Icons.LoadingOutlined iconSize="xl" />
+        <Icons.StopOutlined iconSize="xl" />
+      </Section>
+      <Section title="Navigation">
+        <Icons.MenuOutlined iconSize="xl" />
+        <Icons.DownOutlined iconSize="xl" />
+        <Icons.UpOutlined iconSize="xl" />
+        <Icons.RightOutlined iconSize="xl" />
+        <Icons.CaretDownOutlined iconSize="xl" />
+        <Icons.CaretUpOutlined iconSize="xl" />
+        <Icons.ArrowRightOutlined iconSize="xl" />
+        <Icons.MoreOutlined iconSize="xl" />
+        <Icons.EllipsisOutlined iconSize="xl" />
+      </Section>
+      <Section title="Objects">
+        <Icons.FileOutlined iconSize="xl" />
+        <Icons.FileTextOutlined iconSize="xl" />
+        <Icons.FileImageOutlined iconSize="xl" />
+        <Icons.BookOutlined iconSize="xl" />
+        <Icons.TagOutlined iconSize="xl" />
+        <Icons.TagsOutlined iconSize="xl" />
+        <Icons.StarOutlined iconSize="xl" />
+        <Icons.BellOutlined iconSize="xl" />
+        <Icons.CalendarOutlined iconSize="xl" />
+        <Icons.ClockCircleOutlined iconSize="xl" />
+        <Icons.MailOutlined iconSize="xl" />
+        <Icons.LinkOutlined iconSize="xl" />
+        <Icons.LockOutlined iconSize="xl" />
+        <Icons.UnlockOutlined iconSize="xl" />
+        <Icons.KeyOutlined iconSize="xl" />
+      </Section>
+      <Section title="Users">
+        <Icons.UserOutlined iconSize="xl" />
+        <Icons.UserAddOutlined iconSize="xl" />
+        <Icons.UsergroupAddOutlined iconSize="xl" />
+        <Icons.LoginOutlined iconSize="xl" />
+      </Section>
+      <Section title="Settings">
+        <Icons.SettingOutlined iconSize="xl" />
+        <Icons.BgColorsOutlined iconSize="xl" />
+        <Icons.FormatPainterOutlined iconSize="xl" />
+        <Icons.HighlightOutlined iconSize="xl" />
+        <Icons.EyeOutlined iconSize="xl" />
+        <Icons.EyeInvisibleOutlined iconSize="xl" />
+        <Icons.SunOutlined iconSize="xl" />
+        <Icons.MoonOutlined iconSize="xl" />
+      </Section>
+    </div>
+  );
+}
+```
+
+## Icon with Text
+
+```tsx live
+function IconWithText() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <Icons.CheckCircleOutlined iconSize="l" style={{ color: '#52c41a' }} />
+        <span>Success message</span>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <Icons.InfoCircleOutlined iconSize="l" style={{ color: '#1890ff' }} />
+        <span>Information message</span>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <Icons.WarningOutlined iconSize="l" style={{ color: '#faad14' }} />
+        <span>Warning message</span>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <Icons.CloseCircleOutlined iconSize="l" style={{ color: '#ff4d4f' }} />
+        <span>Error message</span>
+      </div>
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `iconSize` | `string` | `"xl"` | Size of the icons: s (12px), m (16px), l (20px), xl (24px), xxl (32px). |
+
+## Import
+
+```tsx
+import { Icons } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Icons/Icons.stories.tsx).
+:::

docs/developer_docs/components/ui/icontooltip.mdx

@@ -0,0 +1,100 @@
+---
+title: IconTooltip
+sidebar_label: IconTooltip
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# IconTooltip
+
+The IconTooltip component from Superset's UI library.
+
+## Live Example
+
+<StoryWithControls
+  component="IconTooltip"
+  props={{
+  tooltip: "Tooltip"
+}}
+  controls={[
+  {
+    name: "tooltip",
+    label: "Tooltip",
+    type: "text",
+    description: "Text content to display in the tooltip."
+  },
+  {
+    name: "placement",
+    label: "Placement",
+    type: "select",
+    options: [
+      "bottom",
+      "bottomLeft",
+      "bottomRight",
+      "left",
+      "leftBottom",
+      "leftTop",
+      "right",
+      "rightBottom",
+      "rightTop",
+      "top",
+      "topLeft",
+      "topRight"
+    ],
+    description: "Position of the tooltip relative to the icon."
+  }
+]}
+  sampleChildren={[{"component":"Icons.InfoCircleOutlined","props":{"iconSize":"l"}}]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <IconTooltip tooltip="Helpful information">
+      <Icons.InfoCircleOutlined iconSize="l" />
+    </IconTooltip>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `tooltip` | `string` | `"Tooltip"` | Text content to display in the tooltip. |
+
+## Import
+
+```tsx
+import { IconTooltip } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/IconTooltip/IconTooltip.stories.tsx).
+:::

docs/developer_docs/components/ui/index.mdx

@@ -0,0 +1,77 @@
+---
+title: Core Components
+sidebar_label: Core Components
+sidebar_position: 1
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+# Core Components
+
+46 components available in this category.
+
+## Components
+
+- [AutoComplete](./autocomplete)
+- [Avatar](./avatar)
+- [Badge](./badge)
+- [Breadcrumb](./breadcrumb)
+- [Button](./button)
+- [ButtonGroup](./buttongroup)
+- [CachedLabel](./cachedlabel)
+- [Card](./card)
+- [Checkbox](./checkbox)
+- [Collapse](./collapse)
+- [DatePicker](./datepicker)
+- [Divider](./divider)
+- [EditableTitle](./editabletitle)
+- [EmptyState](./emptystate)
+- [FaveStar](./favestar)
+- [IconButton](./iconbutton)
+- [Icons](./icons)
+- [IconTooltip](./icontooltip)
+- [InfoTooltip](./infotooltip)
+- [Input](./input)
+- [Label](./label)
+- [List](./list)
+- [ListViewCard](./listviewcard)
+- [Loading](./loading)
+- [Menu](./menu)
+- [Modal](./modal)
+- [ModalTrigger](./modaltrigger)
+- [Popover](./popover)
+- [ProgressBar](./progressbar)
+- [Radio](./radio)
+- [SafeMarkdown](./safemarkdown)
+- [Select](./select)
+- [Skeleton](./skeleton)
+- [Slider](./slider)
+- [Steps](./steps)
+- [Switch](./switch)
+- [TableCollection](./tablecollection)
+- [TableView](./tableview)
+- [Tabs](./tabs)
+- [Timer](./timer)
+- [Tooltip](./tooltip)
+- [Tree](./tree)
+- [TreeSelect](./treeselect)
+- [Typography](./typography)
+- [UnsavedChangesModal](./unsavedchangesmodal)
+- [Upload](./upload)

docs/developer_docs/components/ui/infotooltip.mdx

@@ -0,0 +1,106 @@
+---
+title: InfoTooltip
+sidebar_label: InfoTooltip
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# InfoTooltip
+
+The InfoTooltip component from Superset's UI library.
+
+## Live Example
+
+<StoryWithControls
+  component="InfoTooltip"
+  props={{
+  tooltip: "This is the text that will display!"
+}}
+  controls={[
+  {
+    name: "tooltip",
+    label: "Tooltip",
+    type: "text"
+  },
+  {
+    name: "placement",
+    label: "Placement",
+    type: "select",
+    options: [
+      "bottom",
+      "left",
+      "right",
+      "top",
+      "topLeft",
+      "topRight",
+      "bottomLeft",
+      "bottomRight",
+      "leftTop",
+      "leftBottom",
+      "rightTop",
+      "rightBottom"
+    ]
+  },
+  {
+    name: "trigger",
+    label: "Trigger",
+    type: "select",
+    options: [
+      "hover",
+      "click"
+    ]
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <InfoTooltip
+      tooltip="This is the text that will display!"
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `tooltip` | `string` | `"This is the text that will display!"` | - |
+
+## Import
+
+```tsx
+import { InfoTooltip } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/InfoTooltip/InfoTooltip.stories.tsx).
+:::

docs/developer_docs/components/ui/input.mdx

@@ -0,0 +1,162 @@
+---
+title: Input
+sidebar_label: Input
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# Input
+
+The Input component from Superset's UI library.
+
+## Live Example
+
+<StoryWithControls
+  component="Input"
+  props={{
+  allowClear: false,
+  disabled: false,
+  showCount: false,
+  type: "text",
+  variant: "outlined"
+}}
+  controls={[
+  {
+    name: "allowClear",
+    label: "Allow Clear",
+    type: "boolean"
+  },
+  {
+    name: "disabled",
+    label: "Disabled",
+    type: "boolean"
+  },
+  {
+    name: "showCount",
+    label: "Show Count",
+    type: "boolean"
+  },
+  {
+    name: "type",
+    label: "Type",
+    type: "select",
+    options: [
+      "text",
+      "password",
+      "email",
+      "number",
+      "tel",
+      "url",
+      "search"
+    ],
+    description: "HTML input type"
+  },
+  {
+    name: "variant",
+    label: "Variant",
+    type: "select",
+    options: [
+      "outlined",
+      "borderless",
+      "filled"
+    ],
+    description: "Input style variant"
+  },
+  {
+    name: "defaultValue",
+    label: "Default Value",
+    type: "text",
+    description: "Default input value"
+  },
+  {
+    name: "id",
+    label: "ID",
+    type: "text",
+    description: "HTML id attribute"
+  },
+  {
+    name: "maxLength",
+    label: "Max Length",
+    type: "number",
+    description: "Maximum length of input"
+  },
+  {
+    name: "status",
+    label: "Status",
+    type: "select",
+    options: [
+      "error",
+      "warning"
+    ],
+    description: "Validation status"
+  },
+  {
+    name: "size",
+    label: "Size",
+    type: "select",
+    options: [
+      "large",
+      "middle",
+      "small"
+    ],
+    description: "Size of the input"
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <Input
+      type="text"
+      variant="outlined"
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `allowClear` | `boolean` | `false` | - |
+| `disabled` | `boolean` | `false` | - |
+| `showCount` | `boolean` | `false` | - |
+| `type` | `string` | `"text"` | HTML input type |
+| `variant` | `string` | `"outlined"` | Input style variant |
+
+## Import
+
+```tsx
+import { Input } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Input/Input.stories.tsx).
+:::

docs/developer_docs/components/ui/label.mdx

@@ -0,0 +1,105 @@
+---
+title: Label
+sidebar_label: Label
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# Label
+
+The Label component from Superset's UI library.
+
+## Live Example
+
+<StoryWithControls
+  component="Label"
+  props={{
+  type: "default",
+  children: "Label text",
+  monospace: false
+}}
+  controls={[
+  {
+    name: "type",
+    label: "Type",
+    type: "select",
+    options: [
+      "default",
+      "info",
+      "success",
+      "warning",
+      "error",
+      "primary"
+    ],
+    description: "The visual style of the label."
+  },
+  {
+    name: "children",
+    label: "Children",
+    type: "text",
+    description: "The label text content."
+  },
+  {
+    name: "monospace",
+    label: "Monospace",
+    type: "boolean",
+    description: "Use monospace font."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <Label
+      type="default"
+    >
+      Label text
+    </Label>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | `string` | `"default"` | The visual style of the label. |
+| `children` | `string` | `"Label text"` | The label text content. |
+| `monospace` | `boolean` | `false` | Use monospace font. |
+
+## Import
+
+```tsx
+import { Label } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Label/Label.stories.tsx).
+:::

docs/developer_docs/components/ui/list.mdx

@@ -0,0 +1,117 @@
+---
+title: List
+sidebar_label: List
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# List
+
+The List component from Superset's UI library.
+
+## Live Example
+
+<StoryWithControls
+  component="List"
+  props={{
+  bordered: false,
+  split: true,
+  size: "default",
+  loading: false,
+  dataSource: [
+    "Dashboard Analytics",
+    "User Management",
+    "Data Sources"
+  ]
+}}
+  controls={[
+  {
+    name: "bordered",
+    label: "Bordered",
+    type: "boolean",
+    description: "Whether to show a border around the list."
+  },
+  {
+    name: "split",
+    label: "Split",
+    type: "boolean",
+    description: "Whether to show a divider between items."
+  },
+  {
+    name: "size",
+    label: "Size",
+    type: "select",
+    options: [
+      "default",
+      "small",
+      "large"
+    ],
+    description: "Size of the list."
+  },
+  {
+    name: "loading",
+    label: "Loading",
+    type: "boolean",
+    description: "Whether to show a loading indicator."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  const data = ['Dashboard Analytics', 'User Management', 'Data Sources'];
+  return (
+    <List
+      bordered
+      dataSource={data}
+      renderItem={(item) => <List.Item>{item}</List.Item>}
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `bordered` | `boolean` | `false` | Whether to show a border around the list. |
+| `split` | `boolean` | `true` | Whether to show a divider between items. |
+| `size` | `string` | `"default"` | Size of the list. |
+| `loading` | `boolean` | `false` | Whether to show a loading indicator. |
+| `dataSource` | `any` | `["Dashboard Analytics","User Management","Data Sources"]` | - |
+
+## Import
+
+```tsx
+import { List } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/List/List.stories.tsx).
+:::

docs/developer_docs/components/ui/listviewcard.mdx

@@ -0,0 +1,132 @@
+---
+title: ListViewCard
+sidebar_label: ListViewCard
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# ListViewCard
+
+ListViewCard is a card component used to display items in list views with an image, title, description, and optional cover sections.
+
+## Live Example
+
+<StoryWithControls
+  component="ListViewCard"
+  props={{
+  title: "Superset Card Title",
+  loading: false,
+  url: "/superset/dashboard/births/",
+  imgURL: "https://picsum.photos/seed/superset/300/200",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
+  coverLeft: "Left Section",
+  coverRight: "Right Section"
+}}
+  controls={[
+  {
+    name: "title",
+    label: "Title",
+    type: "text",
+    description: "Title displayed on the card."
+  },
+  {
+    name: "loading",
+    label: "Loading",
+    type: "boolean",
+    description: "Whether the card is in loading state."
+  },
+  {
+    name: "url",
+    label: "URL",
+    type: "text",
+    description: "URL the card links to."
+  },
+  {
+    name: "imgURL",
+    label: "Image URL",
+    type: "text",
+    description: "Primary image URL for the card."
+  },
+  {
+    name: "description",
+    label: "Description",
+    type: "text",
+    description: "Description text displayed on the card."
+  },
+  {
+    name: "coverLeft",
+    label: "Cover Left",
+    type: "text",
+    description: "Content for the left section of the cover."
+  },
+  {
+    name: "coverRight",
+    label: "Cover Right",
+    type: "text",
+    description: "Content for the right section of the cover."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <ListViewCard
+      title="Superset Card Title"
+      url="/superset/dashboard/births/"
+      imgURL="https://picsum.photos/seed/superset/300/200"
+      description="Lorem ipsum dolor sit amet, consectetur adipiscing elit..."
+      coverLeft="Left Section"
+      coverRight="Right Section"
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | `"Superset Card Title"` | Title displayed on the card. |
+| `loading` | `boolean` | `false` | Whether the card is in loading state. |
+| `url` | `string` | `"/superset/dashboard/births/"` | URL the card links to. |
+| `imgURL` | `string` | `"https://picsum.photos/seed/superset/300/200"` | Primary image URL for the card. |
+| `description` | `string` | `"Lorem ipsum dolor sit amet, consectetur adipiscing elit..."` | Description text displayed on the card. |
+| `coverLeft` | `string` | `"Left Section"` | Content for the left section of the cover. |
+| `coverRight` | `string` | `"Right Section"` | Content for the right section of the cover. |
+
+## Import
+
+```tsx
+import { ListViewCard } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/ListViewCard/ListViewCard.stories.tsx).
+:::

docs/developer_docs/components/ui/loading.mdx

@@ -0,0 +1,187 @@
+---
+title: Loading
+sidebar_label: Loading
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# Loading
+
+The Loading component from Superset's UI library.
+
+## Live Example
+
+<StoryWithControls
+  component="Loading"
+  props={{
+  size: "m",
+  position: "normal",
+  muted: false
+}}
+  controls={[
+  {
+    name: "size",
+    label: "Size",
+    type: "select",
+    options: [
+      "s",
+      "m",
+      "l"
+    ],
+    description: "Size of the spinner: s (40px), m (70px), or l (100px)."
+  },
+  {
+    name: "position",
+    label: "Position",
+    type: "select",
+    options: [
+      "normal",
+      "floating",
+      "inline"
+    ],
+    description: "Position style: normal (inline flow), floating (overlay), or inline."
+  },
+  {
+    name: "muted",
+    label: "Muted",
+    type: "boolean",
+    description: "Whether to show a muted/subtle version of the spinner."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <div>
+      {['normal', 'floating', 'inline'].map(position => (
+        <div
+          key={position}
+          style={{
+            marginBottom: 40,
+            padding: 20,
+            border: '1px solid #eee',
+            position: 'relative',
+            minHeight: 80,
+          }}
+        >
+          <h4 style={{ marginTop: 0 }}>{position}</h4>
+          <Loading position={position} size="m" />
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+## Size and Opacity Showcase
+
+```tsx live
+function SizeShowcase() {
+  const sizes = ['s', 'm', 'l'];
+  return (
+    <div style={{ padding: 20 }}>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, alignItems: 'center' }}>
+        <div><strong>Size</strong></div>
+        <div><strong>Normal</strong></div>
+        <div><strong>Muted</strong></div>
+        <div><strong>Usage</strong></div>
+        {sizes.map(size => (
+          <React.Fragment key={size}>
+            <div style={{ fontWeight: 'bold' }}>
+              {size.toUpperCase()} ({size === 's' ? '40px' : size === 'm' ? '70px' : '100px'})
+            </div>
+            <div style={{ textAlign: 'center', padding: 10, border: '1px solid #eee' }}>
+              <Loading size={size} position="normal" />
+            </div>
+            <div style={{ textAlign: 'center', padding: 10, border: '1px solid #eee' }}>
+              <Loading size={size} muted position="normal" />
+            </div>
+            <div style={{ fontSize: 12, color: '#666' }}>
+              {size === 's' && 'Filter bars, inline'}
+              {size === 'm' && 'Explore pages'}
+              {size === 'l' && 'Full page loading'}
+            </div>
+          </React.Fragment>
+        ))}
+      </div>
+    </div>
+  );
+}
+```
+
+## Contextual Examples
+
+```tsx live
+function ContextualDemo() {
+  return (
+    <div style={{ padding: 20 }}>
+      <h4>Filter Bar (size="s", muted)</h4>
+      <div style={{ height: 40, backgroundColor: '#f5f5f5', display: 'flex', alignItems: 'center', padding: '0 10px', gap: 10, marginBottom: 30 }}>
+        <span>Filter 1:</span>
+        <Loading size="s" muted position="normal" />
+        <span>Filter 2:</span>
+        <Loading size="s" muted position="normal" />
+      </div>
+
+      <h4>Dashboard Grid (size="s", muted)</h4>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 30 }}>
+        {[1, 2, 3].map(i => (
+          <div key={i} style={{ height: 100, backgroundColor: '#fafafa', border: '1px solid #ddd', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <Loading size="s" muted position="normal" />
+          </div>
+        ))}
+      </div>
+
+      <h4>Main Loading (size="l")</h4>
+      <div style={{ height: 200, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '2px dashed #ccc' }}>
+        <Loading size="l" position="normal" />
+      </div>
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `string` | `"m"` | Size of the spinner: s (40px), m (70px), or l (100px). |
+| `position` | `string` | `"normal"` | Position style: normal (inline flow), floating (overlay), or inline. |
+| `muted` | `boolean` | `false` | Whether to show a muted/subtle version of the spinner. |
+
+## Import
+
+```tsx
+import { Loading } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Loading/Loading.stories.tsx).
+:::

docs/developer_docs/components/ui/menu.mdx

@@ -0,0 +1,174 @@
+---
+title: Menu
+sidebar_label: Menu
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# Menu
+
+Navigation menu component supporting horizontal, vertical, and inline modes. Based on Ant Design Menu with Superset styling.
+
+## Live Example
+
+<StoryWithControls
+  component="Menu"
+  props={{
+  mode: "horizontal",
+  selectable: true,
+  items: [
+    {
+      label: "Dashboards",
+      key: "dashboards"
+    },
+    {
+      label: "Charts",
+      key: "charts"
+    },
+    {
+      label: "Datasets",
+      key: "datasets"
+    },
+    {
+      label: "SQL Lab",
+      key: "sqllab"
+    }
+  ]
+}}
+  controls={[
+  {
+    name: "mode",
+    label: "Mode",
+    type: "select",
+    options: [
+      "horizontal",
+      "vertical",
+      "inline"
+    ],
+    description: "Menu display mode: horizontal navbar, vertical sidebar, or inline collapsible."
+  },
+  {
+    name: "selectable",
+    label: "Selectable",
+    type: "boolean",
+    description: "Whether menu items can be selected."
+  },
+  {
+    name: "multiple",
+    label: "Multiple",
+    type: "boolean",
+    description: "Allow multiple items to be selected."
+  },
+  {
+    name: "inlineCollapsed",
+    label: "Inline Collapsed",
+    type: "boolean",
+    description: "Whether the inline menu is collapsed (only applies to inline mode)."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <Menu
+      mode="horizontal"
+      selectable
+      items={[
+        { label: 'Dashboards', key: 'dashboards' },
+        { label: 'Charts', key: 'charts' },
+        { label: 'Datasets', key: 'datasets' },
+        { label: 'SQL Lab', key: 'sqllab' },
+      ]}
+    />
+  );
+}
+```
+
+## Vertical Menu
+
+```tsx live
+function VerticalMenu() {
+  return (
+    <Menu
+      mode="vertical"
+      style={{ width: 200 }}
+      items={[
+        { label: 'Dashboards', key: 'dashboards' },
+        { label: 'Charts', key: 'charts' },
+        { label: 'Datasets', key: 'datasets' },
+        {
+          label: 'Settings',
+          key: 'settings',
+          children: [
+            { label: 'Profile', key: 'profile' },
+            { label: 'Preferences', key: 'preferences' },
+          ],
+        },
+      ]}
+    />
+  );
+}
+```
+
+## Menu with Icons
+
+```tsx live
+function MenuWithIcons() {
+  return (
+    <Menu
+      mode="horizontal"
+      items={[
+        { label: <><Icons.DashboardOutlined /> Dashboards</>, key: 'dashboards' },
+        { label: <><Icons.LineChartOutlined /> Charts</>, key: 'charts' },
+        { label: <><Icons.DatabaseOutlined /> Datasets</>, key: 'datasets' },
+        { label: <><Icons.ConsoleSqlOutlined /> SQL Lab</>, key: 'sqllab' },
+      ]}
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `mode` | `string` | `"horizontal"` | Menu display mode: horizontal navbar, vertical sidebar, or inline collapsible. |
+| `selectable` | `boolean` | `true` | Whether menu items can be selected. |
+| `items` | `any` | `[{"label":"Dashboards","key":"dashboards"},{"label":"Charts","key":"charts"},{"label":"Datasets","key":"datasets"},{"label":"SQL Lab","key":"sqllab"}]` | - |
+
+## Import
+
+```tsx
+import { Menu } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Menu/Menu.stories.tsx).
+:::

docs/developer_docs/components/ui/modal.mdx

@@ -0,0 +1,207 @@
+---
+title: Modal
+sidebar_label: Modal
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# Modal
+
+Modal dialog component for displaying content that requires user attention or interaction. Supports customizable buttons, drag/resize, and confirmation dialogs.
+
+## Live Example
+
+<StoryWithControls
+  component="Modal"
+  props={{
+  disablePrimaryButton: false,
+  primaryButtonName: "Submit",
+  primaryButtonStyle: "primary",
+  show: false,
+  title: "I'm a modal!",
+  resizable: false,
+  draggable: false,
+  width: 500
+}}
+  controls={[
+  {
+    name: "disablePrimaryButton",
+    label: "Disable Primary Button",
+    type: "boolean",
+    description: "Whether the primary button is disabled."
+  },
+  {
+    name: "primaryButtonName",
+    label: "Primary Button Name",
+    type: "text",
+    description: "Text for the primary action button."
+  },
+  {
+    name: "primaryButtonStyle",
+    label: "Primary Button Style",
+    type: "select",
+    options: [
+      "primary",
+      "secondary",
+      "dashed",
+      "danger",
+      "link"
+    ],
+    description: "The style of the primary action button."
+  },
+  {
+    name: "show",
+    label: "Show",
+    type: "boolean",
+    description: "Whether the modal is visible. Use the \"Try It\" example below for a working demo."
+  },
+  {
+    name: "title",
+    label: "Title",
+    type: "text",
+    description: "Title displayed in the modal header."
+  },
+  {
+    name: "resizable",
+    label: "Resizable",
+    type: "boolean",
+    description: "Whether the modal can be resized by dragging corners."
+  },
+  {
+    name: "draggable",
+    label: "Draggable",
+    type: "boolean",
+    description: "Whether the modal can be dragged by its header."
+  },
+  {
+    name: "width",
+    label: "Width",
+    type: "number",
+    description: "Width of the modal in pixels."
+  }
+]}
+  triggerProp="show"
+  onHideProp="onHide"
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function ModalDemo() {
+  const [isOpen, setIsOpen] = React.useState(false);
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+      <Modal
+        show={isOpen}
+        onHide={() => setIsOpen(false)}
+        title="Example Modal"
+        primaryButtonName="Submit"
+        onHandledPrimaryAction={() => {
+          alert('Submitted!');
+          setIsOpen(false);
+        }}
+      >
+        <p>This is the modal content. Click Submit or close the modal.</p>
+      </Modal>
+    </>
+  );
+}
+```
+
+## Danger Modal
+
+```tsx live
+function DangerModal() {
+  const [isOpen, setIsOpen] = React.useState(false);
+  return (
+    <>
+      <Button buttonStyle="danger" onClick={() => setIsOpen(true)}>Delete Item</Button>
+      <Modal
+        show={isOpen}
+        onHide={() => setIsOpen(false)}
+        title="Confirm Delete"
+        primaryButtonName="Delete"
+        primaryButtonStyle="danger"
+        onHandledPrimaryAction={() => {
+          alert('Deleted!');
+          setIsOpen(false);
+        }}
+      >
+        <p>Are you sure you want to delete this item? This action cannot be undone.</p>
+      </Modal>
+    </>
+  );
+}
+```
+
+## Confirmation Dialogs
+
+```tsx live
+function ConfirmationDialogs() {
+  return (
+    <div style={{ display: 'flex', gap: 8 }}>
+      <Button onClick={() => Modal.confirm({
+        title: 'Confirm Action',
+        content: 'Are you sure you want to proceed?',
+        okText: 'Yes',
+      })}>Confirm</Button>
+      <Button onClick={() => Modal.warning({
+        title: 'Warning',
+        content: 'This action may have consequences.',
+      })}>Warning</Button>
+      <Button onClick={() => Modal.error({
+        title: 'Error',
+        content: 'Something went wrong.',
+      })}>Error</Button>
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `disablePrimaryButton` | `boolean` | `false` | Whether the primary button is disabled. |
+| `primaryButtonName` | `string` | `"Submit"` | Text for the primary action button. |
+| `primaryButtonStyle` | `string` | `"primary"` | The style of the primary action button. |
+| `show` | `boolean` | `false` | Whether the modal is visible. Use the "Try It" example below for a working demo. |
+| `title` | `string` | `"I'm a modal!"` | Title displayed in the modal header. |
+| `resizable` | `boolean` | `false` | Whether the modal can be resized by dragging corners. |
+| `draggable` | `boolean` | `false` | Whether the modal can be dragged by its header. |
+| `width` | `number` | `500` | Width of the modal in pixels. |
+
+## Import
+
+```tsx
+import { Modal } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Modal/Modal.stories.tsx).
+:::

docs/developer_docs/components/ui/modaltrigger.mdx

@@ -0,0 +1,192 @@
+---
+title: ModalTrigger
+sidebar_label: ModalTrigger
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# ModalTrigger
+
+A component that renders a trigger element which opens a modal when clicked. Useful for actions that need confirmation or additional input.
+
+## Live Example
+
+<StoryWithControls
+  component="ModalTrigger"
+  props={{
+  isButton: true,
+  modalTitle: "Modal Title",
+  modalBody: "This is the modal body content.",
+  tooltip: "Click to open modal",
+  width: "600px",
+  maxWidth: "1000px",
+  responsive: true,
+  draggable: false,
+  resizable: false,
+  triggerNode: "Click to Open Modal"
+}}
+  controls={[
+  {
+    name: "isButton",
+    label: "Is Button",
+    type: "boolean",
+    description: "Whether to wrap the trigger in a button element."
+  },
+  {
+    name: "modalTitle",
+    label: "Modal Title",
+    type: "text",
+    description: "Title displayed in the modal header."
+  },
+  {
+    name: "modalBody",
+    label: "Modal Body",
+    type: "text",
+    description: "Content displayed in the modal body."
+  },
+  {
+    name: "tooltip",
+    label: "Tooltip",
+    type: "text",
+    description: "Tooltip text shown on hover over the trigger."
+  },
+  {
+    name: "width",
+    label: "Width",
+    type: "text",
+    description: "Width of the modal (e.g., \"600px\", \"80%\")."
+  },
+  {
+    name: "maxWidth",
+    label: "Max Width",
+    type: "text",
+    description: "Maximum width of the modal."
+  },
+  {
+    name: "responsive",
+    label: "Responsive",
+    type: "boolean",
+    description: "Whether the modal should be responsive."
+  },
+  {
+    name: "draggable",
+    label: "Draggable",
+    type: "boolean",
+    description: "Whether the modal can be dragged by its header."
+  },
+  {
+    name: "resizable",
+    label: "Resizable",
+    type: "boolean",
+    description: "Whether the modal can be resized by dragging corners."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <ModalTrigger
+      isButton
+      triggerNode={<span>Click to Open</span>}
+      modalTitle="Example Modal"
+      modalBody={<p>This is the modal content. You can put any React elements here.</p>}
+      width="500px"
+      responsive
+    />
+  );
+}
+```
+
+## With Custom Trigger
+
+```tsx live
+function CustomTrigger() {
+  return (
+    <ModalTrigger
+      triggerNode={
+        <Button buttonStyle="primary">
+          <Icons.PlusOutlined /> Add New Item
+        </Button>
+      }
+      modalTitle="Add New Item"
+      modalBody={
+        <div>
+          <p>Fill out the form to add a new item.</p>
+          <Input placeholder="Item name" />
+        </div>
+      }
+      width="400px"
+    />
+  );
+}
+```
+
+## Draggable & Resizable
+
+```tsx live
+function DraggableModal() {
+  return (
+    <ModalTrigger
+      isButton
+      triggerNode={<span>Open Draggable Modal</span>}
+      modalTitle="Draggable & Resizable"
+      modalBody={<p>Try dragging the header or resizing from the corners!</p>}
+      draggable
+      resizable
+      width="500px"
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isButton` | `boolean` | `true` | Whether to wrap the trigger in a button element. |
+| `modalTitle` | `string` | `"Modal Title"` | Title displayed in the modal header. |
+| `modalBody` | `string` | `"This is the modal body content."` | Content displayed in the modal body. |
+| `tooltip` | `string` | `"Click to open modal"` | Tooltip text shown on hover over the trigger. |
+| `width` | `string` | `"600px"` | Width of the modal (e.g., "600px", "80%"). |
+| `maxWidth` | `string` | `"1000px"` | Maximum width of the modal. |
+| `responsive` | `boolean` | `true` | Whether the modal should be responsive. |
+| `draggable` | `boolean` | `false` | Whether the modal can be dragged by its header. |
+| `resizable` | `boolean` | `false` | Whether the modal can be resized by dragging corners. |
+| `triggerNode` | `string` | `"Click to Open Modal"` | The clickable element that opens the modal when clicked. |
+
+## Import
+
+```tsx
+import { ModalTrigger } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/ModalTrigger/ModalTrigger.stories.tsx).
+:::

docs/developer_docs/components/ui/popover.mdx

@@ -0,0 +1,199 @@
+---
+title: Popover
+sidebar_label: Popover
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# Popover
+
+A floating card that appears when hovering or clicking a trigger element. Supports configurable placement, trigger behavior, and custom content.
+
+## Live Example
+
+<StoryWithControls
+  component="Popover"
+  props={{
+  content: "Popover sample content",
+  title: "Popover title",
+  arrow: true,
+  color: "#fff"
+}}
+  controls={[
+  {
+    name: "content",
+    label: "Content",
+    type: "text",
+    description: "Content displayed inside the popover body."
+  },
+  {
+    name: "title",
+    label: "Title",
+    type: "text",
+    description: "Title displayed in the popover header."
+  },
+  {
+    name: "arrow",
+    label: "Arrow",
+    type: "boolean",
+    description: "Whether to show the popover's arrow pointing to the trigger."
+  },
+  {
+    name: "color",
+    label: "Color",
+    type: "color",
+    description: "The background color of the popover."
+  },
+  {
+    name: "placement",
+    label: "Placement",
+    type: "select",
+    options: [
+      "topLeft",
+      "top",
+      "topRight",
+      "leftTop",
+      "left",
+      "leftBottom",
+      "rightTop",
+      "right",
+      "rightBottom",
+      "bottomLeft",
+      "bottom",
+      "bottomRight"
+    ],
+    description: "Position of the popover relative to the trigger element."
+  },
+  {
+    name: "trigger",
+    label: "Trigger",
+    type: "select",
+    options: [
+      "hover",
+      "click",
+      "focus"
+    ],
+    description: "Event that triggers the popover to appear."
+  }
+]}
+  sampleChildren={[{"component":"Button","props":{"children":"Hover me"}}]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <Popover
+      content="Popover sample content"
+      title="Popover title"
+      arrow
+    >
+      <Button>Hover me</Button>
+    </Popover>
+  );
+}
+```
+
+## Click Trigger
+
+```tsx live
+function ClickPopover() {
+  return (
+    <Popover
+      content="This popover appears on click."
+      title="Click Popover"
+      trigger="click"
+    >
+      <Button>Click me</Button>
+    </Popover>
+  );
+}
+```
+
+## Placements
+
+```tsx live
+function PlacementsDemo() {
+  return (
+    <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center', padding: '60px 0' }}>
+      {['top', 'right', 'bottom', 'left'].map(placement => (
+        <Popover
+          key={placement}
+          content={`This popover is placed on the ${placement}`}
+          title={placement}
+          placement={placement}
+        >
+          <Button>{placement}</Button>
+        </Popover>
+      ))}
+    </div>
+  );
+}
+```
+
+## Rich Content
+
+```tsx live
+function RichPopover() {
+  return (
+    <Popover
+      title="Dashboard Info"
+      content={
+        <div>
+          <p><strong>Created by:</strong> Admin</p>
+          <p><strong>Last modified:</strong> Jan 2025</p>
+          <p><strong>Charts:</strong> 12</p>
+        </div>
+      }
+    >
+      <Button buttonStyle="primary">
+        <Icons.InfoCircleOutlined /> View Details
+      </Button>
+    </Popover>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `content` | `string` | `"Popover sample content"` | Content displayed inside the popover body. |
+| `title` | `string` | `"Popover title"` | Title displayed in the popover header. |
+| `arrow` | `boolean` | `true` | Whether to show the popover's arrow pointing to the trigger. |
+| `color` | `string` | `"#fff"` | The background color of the popover. |
+
+## Import
+
+```tsx
+import { Popover } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Popover/Popover.stories.tsx).
+:::

docs/developer_docs/components/ui/progressbar.mdx

@@ -0,0 +1,206 @@
+---
+title: ProgressBar
+sidebar_label: ProgressBar
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# ProgressBar
+
+Progress bar component for displaying completion status. Supports line, circle, and dashboard display types.
+
+## Live Example
+
+<StoryWithControls
+  component="ProgressBar"
+  props={{
+  percent: 75,
+  status: "normal",
+  type: "line",
+  striped: false,
+  showInfo: true,
+  strokeLinecap: "round"
+}}
+  controls={[
+  {
+    name: "percent",
+    label: "Percent",
+    type: "number",
+    description: "Completion percentage (0-100)."
+  },
+  {
+    name: "status",
+    label: "Status",
+    type: "select",
+    options: [
+      "normal",
+      "success",
+      "exception",
+      "active"
+    ],
+    description: "Current status of the progress bar."
+  },
+  {
+    name: "type",
+    label: "Type",
+    type: "select",
+    options: [
+      "line",
+      "circle",
+      "dashboard"
+    ],
+    description: "Display type: line, circle, or dashboard gauge."
+  },
+  {
+    name: "striped",
+    label: "Striped",
+    type: "boolean",
+    description: "Whether to show striped animation on the bar."
+  },
+  {
+    name: "showInfo",
+    label: "Show Info",
+    type: "boolean",
+    description: "Whether to show the percentage text."
+  },
+  {
+    name: "strokeLinecap",
+    label: "Stroke Linecap",
+    type: "select",
+    options: [
+      "round",
+      "butt",
+      "square"
+    ],
+    description: "Shape of the progress bar endpoints."
+  },
+  {
+    name: "strokeColor",
+    label: "Stroke Color",
+    type: "color",
+    description: "Color of the progress bar fill."
+  },
+  {
+    name: "trailColor",
+    label: "Trail Color",
+    type: "color",
+    description: "Color of the unfilled portion."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <ProgressBar
+      percent={75}
+      status="normal"
+      type="line"
+      showInfo
+    />
+  );
+}
+```
+
+## All Progress Types
+
+```tsx live
+function AllTypesDemo() {
+  return (
+    <div style={{ display: 'flex', gap: 40, alignItems: 'center' }}>
+      <div style={{ flex: 1 }}>
+        <h4>Line</h4>
+        <ProgressBar percent={75} type="line" />
+      </div>
+      <div>
+        <h4>Circle</h4>
+        <ProgressBar percent={75} type="circle" />
+      </div>
+      <div>
+        <h4>Dashboard</h4>
+        <ProgressBar percent={75} type="dashboard" />
+      </div>
+    </div>
+  );
+}
+```
+
+## Status Variants
+
+```tsx live
+function StatusDemo() {
+  const statuses = ['normal', 'success', 'exception', 'active'];
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {statuses.map(status => (
+        <div key={status} style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+          <span style={{ width: 80 }}>{status}</span>
+          <ProgressBar percent={75} status={status} type="line" style={{ flex: 1 }} />
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+## Custom Colors
+
+```tsx live
+function CustomColors() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <ProgressBar percent={50} strokeColor="#1890ff" />
+      <ProgressBar percent={70} strokeColor="#52c41a" />
+      <ProgressBar percent={30} strokeColor="#faad14" trailColor="#f0f0f0" />
+      <ProgressBar percent={90} strokeColor="#ff4d4f" />
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `percent` | `number` | `75` | Completion percentage (0-100). |
+| `status` | `string` | `"normal"` | Current status of the progress bar. |
+| `type` | `string` | `"line"` | Display type: line, circle, or dashboard gauge. |
+| `striped` | `boolean` | `false` | Whether to show striped animation on the bar. |
+| `showInfo` | `boolean` | `true` | Whether to show the percentage text. |
+| `strokeLinecap` | `string` | `"round"` | Shape of the progress bar endpoints. |
+
+## Import
+
+```tsx
+import { ProgressBar } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/ProgressBar/ProgressBar.stories.tsx).
+:::

docs/developer_docs/components/ui/radio.mdx

@@ -0,0 +1,137 @@
+---
+title: Radio
+sidebar_label: Radio
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# Radio
+
+Radio button component for selecting one option from a set. Supports standalone radio buttons, radio buttons styled as buttons, and grouped radio buttons with layout configuration.
+
+## Live Example
+
+<StoryWithControls
+  component="Radio"
+  props={{
+  value: "radio1",
+  disabled: false,
+  checked: false,
+  children: "Radio"
+}}
+  controls={[
+  {
+    name: "value",
+    label: "Value",
+    type: "text",
+    description: "The value associated with this radio button."
+  },
+  {
+    name: "disabled",
+    label: "Disabled",
+    type: "boolean",
+    description: "Whether the radio button is disabled."
+  },
+  {
+    name: "checked",
+    label: "Checked",
+    type: "boolean",
+    description: "Whether the radio button is checked (controlled mode)."
+  },
+  {
+    name: "children",
+    label: "Children",
+    type: "text",
+    description: "Label text displayed next to the radio button."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <Radio
+      value="radio1"
+    >
+      Radio
+    </Radio>
+  );
+}
+```
+
+## Radio Button Variants
+
+```tsx live
+function RadioButtonDemo() {
+  const [value, setValue] = React.useState('line');
+  return (
+    <Radio.Group value={value} onChange={e => setValue(e.target.value)}>
+      <Radio.Button value="line">Line Chart</Radio.Button>
+      <Radio.Button value="bar">Bar Chart</Radio.Button>
+      <Radio.Button value="pie">Pie Chart</Radio.Button>
+    </Radio.Group>
+  );
+}
+```
+
+## Vertical Radio Group
+
+```tsx live
+function VerticalDemo() {
+  const [value, setValue] = React.useState('option1');
+  return (
+    <Radio.Group value={value} onChange={e => setValue(e.target.value)}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        <Radio value="option1">First option</Radio>
+        <Radio value="option2">Second option</Radio>
+        <Radio value="option3">Third option</Radio>
+      </div>
+    </Radio.Group>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | `"radio1"` | The value associated with this radio button. |
+| `disabled` | `boolean` | `false` | Whether the radio button is disabled. |
+| `checked` | `boolean` | `false` | Whether the radio button is checked (controlled mode). |
+| `children` | `string` | `"Radio"` | Label text displayed next to the radio button. |
+
+## Import
+
+```tsx
+import { Radio } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Radio/Radio.stories.tsx).
+:::

docs/developer_docs/components/ui/safemarkdown.mdx

@@ -0,0 +1,85 @@
+---
+title: SafeMarkdown
+sidebar_label: SafeMarkdown
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# SafeMarkdown
+
+The SafeMarkdown component from Superset's UI library.
+
+## Live Example
+
+<StoryWithControls
+  component="SafeMarkdown"
+  props={{
+  htmlSanitization: true
+}}
+  controls={[
+  {
+    name: "htmlSanitization",
+    label: "Html Sanitization",
+    type: "boolean",
+    description: "Enable HTML sanitization (recommended for user input)"
+  },
+  {
+    name: "source",
+    label: "Source",
+    type: "text",
+    description: "Markdown source string to render"
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <SafeMarkdown
+      htmlSanitization
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `htmlSanitization` | `boolean` | `true` | Enable HTML sanitization (recommended for user input) |
+
+## Import
+
+```tsx
+import { SafeMarkdown } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/SafeMarkdown/SafeMarkdown.stories.tsx).
+:::

docs/developer_docs/components/ui/select.mdx

@@ -0,0 +1,308 @@
+---
+title: Select
+sidebar_label: Select
+---
+
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+
+# Select
+
+A versatile select component supporting single and multi-select modes, search filtering, option creation, and both synchronous and asynchronous data sources.
+
+## Live Example
+
+<StoryWithControls
+  component="Select"
+  props={{
+  mode: "single",
+  placeholder: "Select ...",
+  showSearch: true,
+  allowNewOptions: false,
+  allowClear: false,
+  allowSelectAll: true,
+  disabled: false,
+  invertSelection: false,
+  oneLine: false,
+  maxTagCount: 4,
+  options: [
+    {
+      label: "Such an incredibly awesome long long label",
+      value: "long-label-1"
+    },
+    {
+      label: "Another incredibly awesome long long label",
+      value: "long-label-2"
+    },
+    {
+      label: "Option A",
+      value: "A"
+    },
+    {
+      label: "Option B",
+      value: "B"
+    },
+    {
+      label: "Option C",
+      value: "C"
+    },
+    {
+      label: "Option D",
+      value: "D"
+    },
+    {
+      label: "Option E",
+      value: "E"
+    },
+    {
+      label: "Option F",
+      value: "F"
+    },
+    {
+      label: "Option G",
+      value: "G"
+    },
+    {
+      label: "Option H",
+      value: "H"
+    },
+    {
+      label: "Option I",
+      value: "I"
+    }
+  ]
+}}
+  controls={[
+  {
+    name: "mode",
+    label: "Mode",
+    type: "inline-radio",
+    options: [
+      "single",
+      "multiple"
+    ],
+    description: "Whether to allow selection of a single option or multiple."
+  },
+  {
+    name: "placeholder",
+    label: "Placeholder",
+    type: "text",
+    description: "Placeholder text when no option is selected."
+  },
+  {
+    name: "showSearch",
+    label: "Show Search",
+    type: "boolean",
+    description: "Whether to show a search input for filtering."
+  },
+  {
+    name: "allowNewOptions",
+    label: "Allow New Options",
+    type: "boolean",
+    description: "Whether users can create new options by typing a value not in the list."
+  },
+  {
+    name: "allowClear",
+    label: "Allow Clear",
+    type: "boolean",
+    description: "Whether to show a clear button to reset the selection."
+  },
+  {
+    name: "allowSelectAll",
+    label: "Allow Select All",
+    type: "boolean",
+    description: "Whether to show a \"Select All\" option in multiple mode."
+  },
+  {
+    name: "disabled",
+    label: "Disabled",
+    type: "boolean",
+    description: "Whether the select is disabled."
+  },
+  {
+    name: "invertSelection",
+    label: "Invert Selection",
+    type: "boolean",
+    description: "Shows a stop icon instead of a checkmark on selected options, indicating deselection on click."
+  },
+  {
+    name: "oneLine",
+    label: "One Line",
+    type: "boolean",
+    description: "Forces tags onto one line with overflow count. Requires multiple mode."
+  },
+  {
+    name: "maxTagCount",
+    label: "Max Tag Count",
+    type: "number",
+    description: "Maximum number of tags to display in multiple mode before showing an overflow count."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <div style={{ width: 300 }}>
+      <Select
+        ariaLabel="demo-select"
+        options={[
+          { label: 'Dashboards', value: 'dashboards' },
+          { label: 'Charts', value: 'charts' },
+          { label: 'Datasets', value: 'datasets' },
+          { label: 'SQL Lab', value: 'sqllab' },
+          { label: 'Settings', value: 'settings' },
+        ]}
+        placeholder="Select ..."
+        showSearch
+      />
+    </div>
+  );
+}
+```
+
+## Multi Select
+
+```tsx live
+function MultiSelectDemo() {
+  return (
+    <div style={{ width: 400 }}>
+      <Select
+        ariaLabel="multi-select"
+        mode="multiple"
+        options={[
+          { label: 'Dashboards', value: 'dashboards' },
+          { label: 'Charts', value: 'charts' },
+          { label: 'Datasets', value: 'datasets' },
+          { label: 'SQL Lab', value: 'sqllab' },
+          { label: 'Settings', value: 'settings' },
+        ]}
+        placeholder="Select items..."
+        allowSelectAll
+        maxTagCount={3}
+      />
+    </div>
+  );
+}
+```
+
+## Allow New Options
+
+```tsx live
+function AllowNewDemo() {
+  return (
+    <div style={{ width: 300 }}>
+      <Select
+        ariaLabel="allow-new-select"
+        mode="multiple"
+        options={[
+          { label: 'Red', value: 'red' },
+          { label: 'Green', value: 'green' },
+          { label: 'Blue', value: 'blue' },
+        ]}
+        placeholder="Type to add tags..."
+        allowNewOptions
+        showSearch
+      />
+    </div>
+  );
+}
+```
+
+## Inverted Selection
+
+```tsx live
+function InvertedDemo() {
+  return (
+    <div style={{ width: 400 }}>
+      <Select
+        ariaLabel="inverted-select"
+        mode="multiple"
+        options={[
+          { label: 'Admin', value: 'admin' },
+          { label: 'Editor', value: 'editor' },
+          { label: 'Viewer', value: 'viewer' },
+          { label: 'Public', value: 'public' },
+        ]}
+        placeholder="Exclude roles..."
+        invertSelection
+      />
+    </div>
+  );
+}
+```
+
+## One Line Mode
+
+```tsx live
+function OneLineDemo() {
+  return (
+    <div style={{ width: 300 }}>
+      <Select
+        ariaLabel="oneline-select"
+        mode="multiple"
+        options={[
+          { label: 'Dashboard 1', value: 'd1' },
+          { label: 'Dashboard 2', value: 'd2' },
+          { label: 'Dashboard 3', value: 'd3' },
+          { label: 'Dashboard 4', value: 'd4' },
+          { label: 'Dashboard 5', value: 'd5' },
+        ]}
+        placeholder="Select dashboards..."
+        oneLine
+      />
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `mode` | `string` | `"single"` | Whether to allow selection of a single option or multiple. |
+| `placeholder` | `string` | `"Select ..."` | Placeholder text when no option is selected. |
+| `showSearch` | `boolean` | `true` | Whether to show a search input for filtering. |
+| `allowNewOptions` | `boolean` | `false` | Whether users can create new options by typing a value not in the list. |
+| `allowClear` | `boolean` | `false` | Whether to show a clear button to reset the selection. |
+| `allowSelectAll` | `boolean` | `true` | Whether to show a "Select All" option in multiple mode. |
+| `disabled` | `boolean` | `false` | Whether the select is disabled. |
+| `invertSelection` | `boolean` | `false` | Shows a stop icon instead of a checkmark on selected options, indicating deselection on click. |
+| `oneLine` | `boolean` | `false` | Forces tags onto one line with overflow count. Requires multiple mode. |
+| `maxTagCount` | `number` | `4` | Maximum number of tags to display in multiple mode before showing an overflow count. |
+| `options` | `any` | `[{"label":"Such an incredibly awesome long long label","value":"long-label-1"},{"label":"Another incredibly awesome long long label","value":"long-label-2"},{"label":"Option A","value":"A"},{"label":"Option B","value":"B"},{"label":"Option C","value":"C"},{"label":"Option D","value":"D"},{"label":"Option E","value":"E"},{"label":"Option F","value":"F"},{"label":"Option G","value":"G"},{"label":"Option H","value":"H"},{"label":"Option I","value":"I"}]` | - |
+
+## Import
+
+```tsx
+import { Select } from '@superset/components';
+```
+
+---
+
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Select/Select.stories.tsx).
+:::