docs: bifurcate documentation into user and admin sections (#38196)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

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).
+:::

docs/developer_docs/components/ui/skeleton.mdx

@@ -0,0 +1,140 @@
+---
+title: Skeleton
+sidebar_label: Skeleton
+---
+
+<!--
+    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';
+
+# Skeleton
+
+Skeleton loading component with support for avatar, title, paragraph, button, and input placeholders.
+
+## Live Example
+
+<StoryWithControls
+  component="Skeleton"
+  props={{
+  active: true,
+  avatar: false,
+  loading: true,
+  title: true,
+  shape: "circle",
+  size: "default",
+  block: false
+}}
+  controls={[
+  {
+    name: "active",
+    label: "Active",
+    type: "boolean",
+    description: "Show animation effect."
+  },
+  {
+    name: "avatar",
+    label: "Avatar",
+    type: "boolean",
+    description: "Show avatar placeholder."
+  },
+  {
+    name: "loading",
+    label: "Loading",
+    type: "boolean",
+    description: "Display the skeleton when true."
+  },
+  {
+    name: "title",
+    label: "Title",
+    type: "boolean",
+    description: "Show title placeholder."
+  },
+  {
+    name: "shape",
+    label: "Shape",
+    type: "select",
+    options: [
+      "circle",
+      "square"
+    ],
+    description: "Shape of the avatar/button skeleton."
+  },
+  {
+    name: "size",
+    label: "Size",
+    type: "select",
+    options: [
+      "large",
+      "small",
+      "default"
+    ],
+    description: "Size of the skeleton elements."
+  },
+  {
+    name: "block",
+    label: "Block",
+    type: "boolean",
+    description: "Option to fit button width to its parent width."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <Skeleton
+      active
+      loading
+      title
+      shape="circle"
+      size="default"
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `active` | `boolean` | `true` | Show animation effect. |
+| `avatar` | `boolean` | `false` | Show avatar placeholder. |
+| `loading` | `boolean` | `true` | Display the skeleton when true. |
+| `title` | `boolean` | `true` | Show title placeholder. |
+| `shape` | `string` | `"circle"` | Shape of the avatar/button skeleton. |
+| `size` | `string` | `"default"` | Size of the skeleton elements. |
+| `block` | `boolean` | `false` | Option to fit button width to its parent width. |
+
+## Import
+
+```tsx
+import { Skeleton } 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/Skeleton/Skeleton.stories.tsx).
+:::

docs/developer_docs/components/ui/slider.mdx

@@ -0,0 +1,253 @@
+---
+title: Slider
+sidebar_label: Slider
+---
+
+<!--
+    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';
+
+# Slider
+
+A slider input for selecting a value or range from a continuous or stepped interval. Supports single value, range, vertical orientation, marks, and tooltip display.
+
+## Live Example
+
+<StoryWithControls
+  component="Slider"
+  props={{
+  min: 0,
+  max: 100,
+  defaultValue: 70,
+  step: 1,
+  disabled: false,
+  reverse: false,
+  vertical: false,
+  keyboard: true,
+  dots: false,
+  included: true
+}}
+  controls={[
+  {
+    name: "min",
+    label: "Min",
+    type: "number",
+    description: "Minimum value of the slider."
+  },
+  {
+    name: "max",
+    label: "Max",
+    type: "number",
+    description: "Maximum value of the slider."
+  },
+  {
+    name: "defaultValue",
+    label: "Default Value",
+    type: "number",
+    description: "Initial value of the slider."
+  },
+  {
+    name: "step",
+    label: "Step",
+    type: "number",
+    description: "Step increment between values. Use null for marks-only mode."
+  },
+  {
+    name: "disabled",
+    label: "Disabled",
+    type: "boolean",
+    description: "Whether the slider is disabled."
+  },
+  {
+    name: "reverse",
+    label: "Reverse",
+    type: "boolean",
+    description: "Whether to reverse the slider direction."
+  },
+  {
+    name: "vertical",
+    label: "Vertical",
+    type: "boolean",
+    description: "Whether to display the slider vertically."
+  },
+  {
+    name: "keyboard",
+    label: "Keyboard",
+    type: "boolean",
+    description: "Whether keyboard arrow keys can control the slider."
+  },
+  {
+    name: "dots",
+    label: "Dots",
+    type: "boolean",
+    description: "Whether to show dots at each step mark."
+  },
+  {
+    name: "included",
+    label: "Included",
+    type: "boolean",
+    description: "Whether to highlight the filled portion of the track."
+  },
+  {
+    name: "tooltipOpen",
+    label: "Tooltip Open",
+    type: "boolean",
+    description: "Whether the value tooltip is always visible."
+  },
+  {
+    name: "tooltipPosition",
+    label: "Tooltip Position",
+    type: "select",
+    options: [
+      "top",
+      "left",
+      "bottom",
+      "right",
+      "topLeft",
+      "topRight",
+      "bottomLeft",
+      "bottomRight",
+      "leftTop",
+      "leftBottom",
+      "rightTop",
+      "rightBottom"
+    ],
+    description: "Position of the value tooltip relative to the handle."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <div style={{ width: 400, padding: '20px 0' }}>
+      <Slider
+        min={0}
+        max={100}
+        defaultValue={70}
+        step={1}
+      />
+    </div>
+  );
+}
+```
+
+## Range Slider
+
+```tsx live
+function RangeSliderDemo() {
+  return (
+    <div style={{ width: 400, padding: '20px 0' }}>
+      <h4>Basic Range</h4>
+      <Slider range defaultValue={[20, 70]} min={0} max={100} />
+      <br />
+      <h4>Draggable Track</h4>
+      <Slider range={{ draggableTrack: true }} defaultValue={[30, 60]} min={0} max={100} />
+    </div>
+  );
+}
+```
+
+## With Marks
+
+```tsx live
+function MarksDemo() {
+  return (
+    <div style={{ width: 400, padding: '20px 0' }}>
+      <Slider
+        min={0}
+        max={100}
+        defaultValue={37}
+        marks={{
+          0: '0°C',
+          25: '25°C',
+          50: '50°C',
+          75: '75°C',
+          100: '100°C',
+        }}
+      />
+    </div>
+  );
+}
+```
+
+## Stepped and Dots
+
+```tsx live
+function SteppedDemo() {
+  return (
+    <div style={{ width: 400, padding: '20px 0' }}>
+      <h4>Step = 10 with Dots</h4>
+      <Slider min={0} max={100} defaultValue={30} step={10} dots />
+      <br />
+      <h4>Step = 25</h4>
+      <Slider min={0} max={100} defaultValue={50} step={25} dots
+        marks={{ 0: '0', 25: '25', 50: '50', 75: '75', 100: '100' }} />
+    </div>
+  );
+}
+```
+
+## Vertical Slider
+
+```tsx live
+function VerticalDemo() {
+  return (
+    <div style={{ height: 300, display: 'flex', gap: 40, padding: '0 40px' }}>
+      <Slider vertical defaultValue={30} />
+      <Slider vertical range defaultValue={[20, 60]} />
+      <Slider vertical defaultValue={50} dots step={10}
+        marks={{ 0: '0', 50: '50', 100: '100' }} />
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `min` | `number` | `0` | Minimum value of the slider. |
+| `max` | `number` | `100` | Maximum value of the slider. |
+| `defaultValue` | `number` | `70` | Initial value of the slider. |
+| `step` | `number` | `1` | Step increment between values. Use null for marks-only mode. |
+| `disabled` | `boolean` | `false` | Whether the slider is disabled. |
+| `reverse` | `boolean` | `false` | Whether to reverse the slider direction. |
+| `vertical` | `boolean` | `false` | Whether to display the slider vertically. |
+| `keyboard` | `boolean` | `true` | Whether keyboard arrow keys can control the slider. |
+| `dots` | `boolean` | `false` | Whether to show dots at each step mark. |
+| `included` | `boolean` | `true` | Whether to highlight the filled portion of the track. |
+
+## Import
+
+```tsx
+import { Slider } 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/Slider/Slider.stories.tsx).
+:::

docs/developer_docs/components/ui/steps.mdx

@@ -0,0 +1,272 @@
+---
+title: Steps
+sidebar_label: Steps
+---
+
+<!--
+    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';
+
+# Steps
+
+A navigation component for guiding users through multi-step workflows. Supports horizontal, vertical, and inline layouts with progress tracking.
+
+## Live Example
+
+<StoryWithControls
+  component="Steps"
+  props={{
+  direction: "horizontal",
+  current: 1,
+  labelPlacement: "horizontal",
+  progressDot: false,
+  size: "default",
+  status: "process",
+  type: "default",
+  title: "Step 3",
+  description: "Description 3",
+  items: [
+    {
+      title: "Connect Database",
+      description: "Configure the connection"
+    },
+    {
+      title: "Create Dataset",
+      description: "Select tables and columns"
+    },
+    {
+      title: "Build Chart",
+      description: "Choose visualization type"
+    }
+  ]
+}}
+  controls={[
+  {
+    name: "direction",
+    label: "Direction",
+    type: "select",
+    options: [
+      "horizontal",
+      "vertical"
+    ],
+    description: "Layout direction of the steps."
+  },
+  {
+    name: "current",
+    label: "Current",
+    type: "number",
+    description: "Index of the current step (zero-based)."
+  },
+  {
+    name: "labelPlacement",
+    label: "Label Placement",
+    type: "select",
+    options: [
+      "horizontal",
+      "vertical"
+    ],
+    description: "Position of step labels relative to the step icon."
+  },
+  {
+    name: "progressDot",
+    label: "Progress Dot",
+    type: "boolean",
+    description: "Whether to use a dot style instead of numbered icons."
+  },
+  {
+    name: "size",
+    label: "Size",
+    type: "select",
+    options: [
+      "default",
+      "small"
+    ],
+    description: "Size of the step icons and text."
+  },
+  {
+    name: "status",
+    label: "Status",
+    type: "select",
+    options: [
+      "wait",
+      "process",
+      "finish",
+      "error"
+    ],
+    description: "Status of the current step."
+  },
+  {
+    name: "type",
+    label: "Type",
+    type: "select",
+    options: [
+      "default",
+      "navigation",
+      "inline"
+    ],
+    description: "Visual style: default numbered, navigation breadcrumb, or inline compact."
+  },
+  {
+    name: "title",
+    label: "Title",
+    type: "text"
+  },
+  {
+    name: "description",
+    label: "Description",
+    type: "text"
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <Steps
+      current={1}
+      items={[
+        { title: 'Connect Database', description: 'Configure the connection' },
+        { title: 'Create Dataset', description: 'Select tables and columns' },
+        { title: 'Build Chart', description: 'Choose visualization type' },
+      ]}
+    />
+  );
+}
+```
+
+## Vertical Steps
+
+```tsx live
+function VerticalSteps() {
+  return (
+    <Steps
+      direction="vertical"
+      current={1}
+      items={[
+        { title: 'Upload CSV', description: 'Select a file from your computer' },
+        { title: 'Configure Columns', description: 'Set data types and names' },
+        { title: 'Review', description: 'Verify the data looks correct' },
+        { title: 'Import', description: 'Save the dataset' },
+      ]}
+    />
+  );
+}
+```
+
+## Status Indicators
+
+```tsx live
+function StatusSteps() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
+      <div>
+        <h4>Error on Step 2</h4>
+        <Steps
+          current={1}
+          status="error"
+          items={[
+            { title: 'Connection', description: 'Configured' },
+            { title: 'Validation', description: 'Failed to validate' },
+            { title: 'Complete' },
+          ]}
+        />
+      </div>
+      <div>
+        <h4>All Complete</h4>
+        <Steps
+          current={3}
+          items={[
+            { title: 'Step 1' },
+            { title: 'Step 2' },
+            { title: 'Step 3' },
+          ]}
+        />
+      </div>
+    </div>
+  );
+}
+```
+
+## Dot Style and Small Size
+
+```tsx live
+function DotAndSmall() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
+      <div>
+        <h4>Progress Dots</h4>
+        <Steps
+          progressDot
+          current={1}
+          items={[
+            { title: 'Create', description: 'Define the resource' },
+            { title: 'Configure', description: 'Set parameters' },
+            { title: 'Deploy', description: 'Go live' },
+          ]}
+        />
+      </div>
+      <div>
+        <h4>Small Size</h4>
+        <Steps
+          size="small"
+          current={2}
+          items={[
+            { title: 'Login' },
+            { title: 'Verify' },
+            { title: 'Done' },
+          ]}
+        />
+      </div>
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `direction` | `string` | `"horizontal"` | Layout direction of the steps. |
+| `current` | `number` | `1` | Index of the current step (zero-based). |
+| `labelPlacement` | `string` | `"horizontal"` | Position of step labels relative to the step icon. |
+| `progressDot` | `boolean` | `false` | Whether to use a dot style instead of numbered icons. |
+| `size` | `string` | `"default"` | Size of the step icons and text. |
+| `status` | `string` | `"process"` | Status of the current step. |
+| `type` | `string` | `"default"` | Visual style: default numbered, navigation breadcrumb, or inline compact. |
+| `title` | `string` | `"Step 3"` | - |
+| `description` | `string` | `"Description 3"` | - |
+| `items` | `any` | `[{"title":"Connect Database","description":"Configure the connection"},{"title":"Create Dataset","description":"Select tables and columns"},{"title":"Build Chart","description":"Choose visualization type"}]` | - |
+
+## Import
+
+```tsx
+import { Steps } 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/Steps/Steps.stories.tsx).
+:::

docs/developer_docs/components/ui/switch.mdx

@@ -0,0 +1,193 @@
+---
+title: Switch
+sidebar_label: Switch
+---
+
+<!--
+    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';
+
+# Switch
+
+A toggle switch for boolean on/off states. Supports loading indicators, sizing, and an HTML title attribute for accessibility tooltips.
+
+## Live Example
+
+<StoryWithControls
+  component="Switch"
+  props={{
+  disabled: false,
+  loading: false,
+  title: "Toggle feature"
+}}
+  controls={[
+  {
+    name: "disabled",
+    label: "Disabled",
+    type: "boolean",
+    description: "Whether the switch is disabled."
+  },
+  {
+    name: "loading",
+    label: "Loading",
+    type: "boolean",
+    description: "Whether to show a loading spinner inside the switch."
+  },
+  {
+    name: "title",
+    label: "Title",
+    type: "text",
+    description: "HTML title attribute shown as a browser tooltip on hover. Useful for accessibility."
+  },
+  {
+    name: "checked",
+    label: "Checked",
+    type: "boolean",
+    description: "Whether the switch is on."
+  },
+  {
+    name: "size",
+    label: "Size",
+    type: "radio",
+    options: [
+      "small",
+      "default"
+    ],
+    description: "Size of the switch."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  const [checked, setChecked] = React.useState(true);
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+      <Switch
+        checked={checked}
+        onChange={setChecked}
+        title="Toggle feature"
+      />
+      <span>{checked ? 'On' : 'Off'}</span>
+      <span style={{ color: '#999', fontSize: 12 }}>(hover the switch to see the title tooltip)</span>
+    </div>
+  );
+}
+```
+
+## Switch States
+
+```tsx live
+function SwitchStates() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <Switch defaultChecked title="Enabled switch" />
+        <span>Checked</span>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <Switch title="Unchecked switch" />
+        <span>Unchecked</span>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <Switch disabled defaultChecked title="Disabled on" />
+        <span>Disabled (on)</span>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <Switch disabled title="Disabled off" />
+        <span>Disabled (off)</span>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <Switch loading defaultChecked title="Loading switch" />
+        <span>Loading</span>
+      </div>
+    </div>
+  );
+}
+```
+
+## Sizes
+
+```tsx live
+function SizesDemo() {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <Switch size="small" defaultChecked title="Small switch" />
+        <span>Small</span>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <Switch size="default" defaultChecked title="Default switch" />
+        <span>Default</span>
+      </div>
+    </div>
+  );
+}
+```
+
+## Settings Panel
+
+```tsx live
+function SettingsPanel() {
+  const [notifications, setNotifications] = React.useState(true);
+  const [darkMode, setDarkMode] = React.useState(false);
+  const [autoRefresh, setAutoRefresh] = React.useState(true);
+  return (
+    <div style={{ maxWidth: 320, border: '1px solid #e8e8e8', borderRadius: 8, padding: 16 }}>
+      <h4 style={{ marginTop: 0 }}>Dashboard Settings</h4>
+      {[
+        { label: 'Email notifications', checked: notifications, onChange: setNotifications, title: 'Toggle email notifications' },
+        { label: 'Dark mode', checked: darkMode, onChange: setDarkMode, title: 'Toggle dark mode' },
+        { label: 'Auto-refresh data', checked: autoRefresh, onChange: setAutoRefresh, title: 'Toggle auto-refresh' },
+      ].map(({ label, checked, onChange, title }) => (
+        <div key={label} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0', borderBottom: '1px solid #f0f0f0' }}>
+          <span>{label}</span>
+          <Switch checked={checked} onChange={onChange} title={title} />
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `disabled` | `boolean` | `false` | Whether the switch is disabled. |
+| `loading` | `boolean` | `false` | Whether to show a loading spinner inside the switch. |
+| `title` | `string` | `"Toggle feature"` | HTML title attribute shown as a browser tooltip on hover. Useful for accessibility. |
+
+## Import
+
+```tsx
+import { Switch } 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/Switch/Switch.stories.tsx).
+:::

docs/developer_docs/components/ui/tablecollection.mdx

@@ -0,0 +1,66 @@
+---
+title: TableCollection
+sidebar_label: TableCollection
+---
+
+<!--
+    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';
+
+# TableCollection
+
+The TableCollection component from Superset's UI library.
+
+## Live Example
+
+<StoryWithControls
+  component="TableCollection"
+  props={{}}
+  controls={[]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <TableCollection
+      // Add props here
+    />
+  );
+}
+```
+
+
+
+## Import
+
+```tsx
+import { TableCollection } 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/TableCollection/TableCollection.stories.tsx).
+:::

docs/developer_docs/components/ui/tableview.mdx

@@ -0,0 +1,294 @@
+---
+title: TableView
+sidebar_label: TableView
+---
+
+<!--
+    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';
+
+# TableView
+
+A data table component with sorting, pagination, text wrapping, and empty state support. Built on react-table.
+
+## Live Example
+
+<StoryWithControls
+  component="TableView"
+  props={{
+  accessor: "summary",
+  Header: "Summary",
+  sortable: true,
+  id: 456,
+  age: 10,
+  name: "John Smith",
+  summary: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id porta neque, a vehicula orci. Maecenas rhoncus elit sit amet purus convallis placerat in at nunc. Nulla nec viverra augue.",
+  noDataText: "No data here",
+  pageSize: 2,
+  showRowCount: true,
+  withPagination: true,
+  scrollTopOnPagination: false,
+  columns: [
+    {
+      accessor: "id",
+      Header: "ID",
+      sortable: true,
+      id: "id"
+    },
+    {
+      accessor: "age",
+      Header: "Age",
+      id: "age"
+    },
+    {
+      accessor: "name",
+      Header: "Name",
+      id: "name"
+    },
+    {
+      accessor: "summary",
+      Header: "Summary",
+      id: "summary"
+    }
+  ],
+  data: [
+    {
+      id: 123,
+      age: 27,
+      name: "Emily",
+      summary: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+    },
+    {
+      id: 321,
+      age: 10,
+      name: "Kate",
+      summary: "Nam id porta neque, a vehicula orci."
+    },
+    {
+      id: 456,
+      age: 10,
+      name: "John Smith",
+      summary: "Maecenas rhoncus elit sit amet purus convallis placerat."
+    }
+  ]
+}}
+  controls={[
+  {
+    name: "accessor",
+    label: "Accessor",
+    type: "text"
+  },
+  {
+    name: "Header",
+    label: "Header",
+    type: "text"
+  },
+  {
+    name: "sortable",
+    label: "Sortable",
+    type: "boolean"
+  },
+  {
+    name: "id",
+    label: "ID",
+    type: "number"
+  },
+  {
+    name: "age",
+    label: "Age",
+    type: "number"
+  },
+  {
+    name: "name",
+    label: "Name",
+    type: "text"
+  },
+  {
+    name: "summary",
+    label: "Summary",
+    type: "text"
+  },
+  {
+    name: "noDataText",
+    label: "No Data Text",
+    type: "text",
+    description: "Text displayed when the table has no data."
+  },
+  {
+    name: "pageSize",
+    label: "Page Size",
+    type: "number",
+    description: "Number of rows displayed per page."
+  },
+  {
+    name: "showRowCount",
+    label: "Show Row Count",
+    type: "boolean",
+    description: "Whether to display the total row count alongside pagination."
+  },
+  {
+    name: "withPagination",
+    label: "With Pagination",
+    type: "boolean",
+    description: "Whether to show pagination controls below the table."
+  },
+  {
+    name: "scrollTopOnPagination",
+    label: "Scroll Top On Pagination",
+    type: "boolean",
+    description: "Whether to scroll to the top of the table when changing pages."
+  },
+  {
+    name: "emptyWrapperType",
+    label: "Empty Wrapper Type",
+    type: "select",
+    description: "Style of the empty state wrapper."
+  },
+  {
+    name: "initialPageIndex",
+    label: "Initial Page Index",
+    type: "number",
+    description: "Initial page to display (zero-based)."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <TableView
+      columns={[
+        { accessor: 'id', Header: 'ID', sortable: true, id: 'id' },
+        { accessor: 'age', Header: 'Age', id: 'age' },
+        { accessor: 'name', Header: 'Name', id: 'name' },
+        { accessor: 'summary', Header: 'Summary', id: 'summary' },
+      ]}
+      data={[
+        { id: 123, age: 27, name: 'Emily', summary: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
+        { id: 321, age: 10, name: 'Kate', summary: 'Nam id porta neque, a vehicula orci.' },
+        { id: 456, age: 10, name: 'John Smith', summary: 'Maecenas rhoncus elit sit amet purus convallis placerat.' },
+      ]}
+      initialSortBy={[{ id: 'name', desc: true }]}
+      pageSize={2}
+      withPagination
+      showRowCount
+    />
+  );
+}
+```
+
+## Without Pagination
+
+```tsx live
+function NoPaginationDemo() {
+  return (
+    <TableView
+      columns={[
+        { accessor: 'name', Header: 'Name', id: 'name' },
+        { accessor: 'email', Header: 'Email', id: 'email' },
+        { accessor: 'status', Header: 'Status', id: 'status' },
+      ]}
+      data={[
+        { name: 'Alice', email: 'alice@example.com', status: 'Active' },
+        { name: 'Bob', email: 'bob@example.com', status: 'Inactive' },
+        { name: 'Charlie', email: 'charlie@example.com', status: 'Active' },
+      ]}
+      withPagination={false}
+    />
+  );
+}
+```
+
+## Empty State
+
+```tsx live
+function EmptyDemo() {
+  return (
+    <TableView
+      columns={[
+        { accessor: 'name', Header: 'Name', id: 'name' },
+        { accessor: 'value', Header: 'Value', id: 'value' },
+      ]}
+      data={[]}
+      noDataText="No results found"
+    />
+  );
+}
+```
+
+## With Sorting
+
+```tsx live
+function SortingDemo() {
+  return (
+    <TableView
+      columns={[
+        { accessor: 'id', Header: 'ID', id: 'id', sortable: true },
+        { accessor: 'name', Header: 'Name', id: 'name', sortable: true },
+        { accessor: 'score', Header: 'Score', id: 'score', sortable: true },
+      ]}
+      data={[
+        { id: 1, name: 'Dashboard A', score: 95 },
+        { id: 2, name: 'Dashboard B', score: 72 },
+        { id: 3, name: 'Dashboard C', score: 88 },
+        { id: 4, name: 'Dashboard D', score: 64 },
+      ]}
+      initialSortBy={[{ id: 'score', desc: true }]}
+      withPagination={false}
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `accessor` | `string` | `"summary"` | - |
+| `Header` | `string` | `"Summary"` | - |
+| `sortable` | `boolean` | `true` | - |
+| `id` | `number` | `456` | - |
+| `age` | `number` | `10` | - |
+| `name` | `string` | `"John Smith"` | - |
+| `summary` | `string` | `"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id porta neque, a vehicula orci. Maecenas rhoncus elit sit amet purus convallis placerat in at nunc. Nulla nec viverra augue."` | - |
+| `noDataText` | `string` | `"No data here"` | Text displayed when the table has no data. |
+| `pageSize` | `number` | `2` | Number of rows displayed per page. |
+| `showRowCount` | `boolean` | `true` | Whether to display the total row count alongside pagination. |
+| `withPagination` | `boolean` | `true` | Whether to show pagination controls below the table. |
+| `scrollTopOnPagination` | `boolean` | `false` | Whether to scroll to the top of the table when changing pages. |
+| `columns` | `any` | `[{"accessor":"id","Header":"ID","sortable":true,"id":"id"},{"accessor":"age","Header":"Age","id":"age"},{"accessor":"name","Header":"Name","id":"name"},{"accessor":"summary","Header":"Summary","id":"summary"}]` | - |
+| `data` | `any` | `[{"id":123,"age":27,"name":"Emily","summary":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"id":321,"age":10,"name":"Kate","summary":"Nam id porta neque, a vehicula orci."},{"id":456,"age":10,"name":"John Smith","summary":"Maecenas rhoncus elit sit amet purus convallis placerat."}]` | - |
+
+## Import
+
+```tsx
+import { TableView } 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/TableView/TableView.stories.tsx).
+:::

docs/developer_docs/components/ui/tabs.mdx

@@ -0,0 +1,223 @@
+---
+title: Tabs
+sidebar_label: Tabs
+---
+
+<!--
+    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';
+
+# Tabs
+
+A tabs component for switching between different views or content sections. Supports multiple tab styles, positions, and sizes.
+
+## Live Example
+
+<StoryWithControls
+  component="Tabs"
+  props={{
+  defaultActiveKey: "1",
+  type: "line",
+  tabPosition: "top",
+  size: "middle",
+  animated: true,
+  centered: false,
+  tabBarGutter: 8,
+  items: [
+    {
+      key: "1",
+      label: "Tab 1",
+      children: "Content of Tab Pane 1"
+    },
+    {
+      key: "2",
+      label: "Tab 2",
+      children: "Content of Tab Pane 2"
+    },
+    {
+      key: "3",
+      label: "Tab 3",
+      children: "Content of Tab Pane 3"
+    }
+  ]
+}}
+  controls={[
+  {
+    name: "defaultActiveKey",
+    label: "Default Active Key",
+    type: "text"
+  },
+  {
+    name: "type",
+    label: "Type",
+    type: "inline-radio",
+    options: [
+      "line",
+      "card",
+      "editable-card"
+    ],
+    description: "The style of tabs. Options: line, card, editable-card."
+  },
+  {
+    name: "tabPosition",
+    label: "Tab Position",
+    type: "inline-radio",
+    options: [
+      "top",
+      "bottom",
+      "left",
+      "right"
+    ],
+    description: "Position of tabs. Options: top, bottom, left, right."
+  },
+  {
+    name: "size",
+    label: "Size",
+    type: "inline-radio",
+    options: [
+      "small",
+      "middle",
+      "large"
+    ],
+    description: "Size of the tabs."
+  },
+  {
+    name: "animated",
+    label: "Animated",
+    type: "boolean",
+    description: "Whether to animate tab transitions."
+  },
+  {
+    name: "centered",
+    label: "Centered",
+    type: "boolean",
+    description: "Whether to center the tabs."
+  },
+  {
+    name: "tabBarGutter",
+    label: "Tab Bar Gutter",
+    type: "number",
+    description: "The gap between tabs."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <Tabs
+      defaultActiveKey="1"
+      items={[
+        { key: '1', label: 'Tab 1', children: 'Content of Tab Pane 1' },
+        { key: '2', label: 'Tab 2', children: 'Content of Tab Pane 2' },
+        { key: '3', label: 'Tab 3', children: 'Content of Tab Pane 3' },
+      ]}
+    />
+  );
+}
+```
+
+## Card Style
+
+```tsx live
+function CardTabs() {
+  return (
+    <Tabs
+      type="card"
+      defaultActiveKey="1"
+      items={[
+        { key: '1', label: 'Dashboards', children: 'View and manage your dashboards.' },
+        { key: '2', label: 'Charts', children: 'Browse all saved charts.' },
+        { key: '3', label: 'Datasets', children: 'Explore available datasets.' },
+      ]}
+    />
+  );
+}
+```
+
+## Tab Positions
+
+```tsx live
+function TabPositions() {
+  const items = [
+    { key: '1', label: 'Tab 1', children: 'Content 1' },
+    { key: '2', label: 'Tab 2', children: 'Content 2' },
+    { key: '3', label: 'Tab 3', children: 'Content 3' },
+  ];
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+      {['top', 'bottom', 'left', 'right'].map(pos => (
+        <div key={pos}>
+          <h4>{pos}</h4>
+          <Tabs tabPosition={pos} defaultActiveKey="1" items={items} />
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+## With Icons
+
+```tsx live
+function IconTabs() {
+  return (
+    <Tabs
+      defaultActiveKey="1"
+      items={[
+        { key: '1', label: <><Icons.DashboardOutlined /> Dashboards</>, children: 'Dashboard content here.' },
+        { key: '2', label: <><Icons.LineChartOutlined /> Charts</>, children: 'Chart content here.' },
+        { key: '3', label: <><Icons.DatabaseOutlined /> Datasets</>, children: 'Dataset content here.' },
+        { key: '4', label: <><Icons.ConsoleSqlOutlined /> SQL Lab</>, children: 'SQL Lab content here.' },
+      ]}
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `defaultActiveKey` | `string` | `"1"` | - |
+| `type` | `string` | `"line"` | The style of tabs. Options: line, card, editable-card. |
+| `tabPosition` | `string` | `"top"` | Position of tabs. Options: top, bottom, left, right. |
+| `size` | `string` | `"middle"` | Size of the tabs. |
+| `animated` | `boolean` | `true` | Whether to animate tab transitions. |
+| `centered` | `boolean` | `false` | Whether to center the tabs. |
+| `tabBarGutter` | `number` | `8` | The gap between tabs. |
+| `items` | `any` | `[{"key":"1","label":"Tab 1","children":"Content of Tab Pane 1"},{"key":"2","label":"Tab 2","children":"Content of Tab Pane 2"},{"key":"3","label":"Tab 3","children":"Content of Tab Pane 3"}]` | - |
+
+## Import
+
+```tsx
+import { Tabs } 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/Tabs/Tabs.stories.tsx).
+:::

docs/developer_docs/components/ui/timer.mdx

@@ -0,0 +1,172 @@
+---
+title: Timer
+sidebar_label: Timer
+---
+
+<!--
+    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';
+
+# Timer
+
+A live elapsed-time display that counts up from a given start time. Used to show query and dashboard load durations. Requires a startTime timestamp to function.
+
+## Live Example
+
+<StoryWithControls
+  component="Timer"
+  props={{
+  isRunning: true,
+  status: "success",
+  startTime: 1737936000000
+}}
+  controls={[
+  {
+    name: "isRunning",
+    label: "Is Running",
+    type: "boolean",
+    description: "Whether the timer is actively counting. Toggle to start/stop."
+  },
+  {
+    name: "status",
+    label: "Status",
+    type: "select",
+    options: [
+      "success",
+      "warning",
+      "danger",
+      "info",
+      "default",
+      "primary",
+      "secondary"
+    ],
+    description: "Visual status of the timer badge."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  const [isRunning, setIsRunning] = React.useState(true);
+  const [startTime] = React.useState(Date.now());
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+      <Timer
+        startTime={startTime}
+        isRunning={isRunning}
+        status="success"
+      />
+      <Button onClick={() => setIsRunning(r => !r)}>
+        {isRunning ? 'Stop' : 'Start'}
+      </Button>
+    </div>
+  );
+}
+```
+
+## Status Variants
+
+```tsx live
+function StatusVariants() {
+  const [startTime] = React.useState(Date.now());
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      {['success', 'warning', 'danger', 'info', 'default', 'primary', 'secondary'].map(status => (
+        <div key={status} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+          <span style={{ width: 80 }}>{status}</span>
+          <Timer startTime={startTime} isRunning status={status} />
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+## Completed Timer
+
+```tsx live
+function CompletedTimer() {
+  const start = Date.now() - 5230;
+  const end = Date.now();
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+      <Timer
+        startTime={start}
+        endTime={end}
+        isRunning={false}
+        status="success"
+      />
+      <span style={{ color: '#999' }}>Query completed in ~5.2 seconds</span>
+    </div>
+  );
+}
+```
+
+## Start and Stop
+
+```tsx live
+function StartStop() {
+  const [isRunning, setIsRunning] = React.useState(false);
+  const [startTime, setStartTime] = React.useState(null);
+  const handleToggle = () => {
+    if (!isRunning && !startTime) {
+      setStartTime(Date.now());
+    }
+    setIsRunning(r => !r);
+  };
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+      <Timer
+        startTime={startTime}
+        isRunning={isRunning}
+        status={isRunning ? 'warning' : 'success'}
+      />
+      <Button onClick={handleToggle}>
+        {isRunning ? 'Pause' : startTime ? 'Resume' : 'Start'}
+      </Button>
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isRunning` | `boolean` | `true` | Whether the timer is actively counting. Toggle to start/stop. |
+| `status` | `string` | `"success"` | Visual status of the timer badge. |
+| `startTime` | `number` | `1737936000000` | - |
+
+## Import
+
+```tsx
+import { Timer } 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/Timer/Timer.stories.tsx).
+:::

docs/developer_docs/components/ui/tooltip.mdx

@@ -0,0 +1,171 @@
+---
+title: Tooltip
+sidebar_label: Tooltip
+---
+
+<!--
+    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';
+
+# Tooltip
+
+The Tooltip component from Superset's UI library.
+
+## Live Example
+
+<StoryWithControls
+  component="Tooltip"
+  props={{
+  title: "Simple tooltip text",
+  mouseEnterDelay: 0.1,
+  mouseLeaveDelay: 0.1
+}}
+  controls={[
+  {
+    name: "title",
+    label: "Title",
+    type: "text",
+    description: "Text or content shown in the tooltip."
+  },
+  {
+    name: "mouseEnterDelay",
+    label: "Mouse Enter Delay",
+    type: "number",
+    description: "Delay in seconds before showing the tooltip on hover."
+  },
+  {
+    name: "mouseLeaveDelay",
+    label: "Mouse Leave Delay",
+    type: "number",
+    description: "Delay in seconds before hiding the tooltip after mouse leave."
+  },
+  {
+    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 trigger element."
+  },
+  {
+    name: "trigger",
+    label: "Trigger",
+    type: "select",
+    options: [
+      "hover",
+      "focus",
+      "click",
+      "contextMenu"
+    ],
+    description: "How the tooltip is triggered."
+  },
+  {
+    name: "color",
+    label: "Color",
+    type: "color",
+    description: "Custom background color for the tooltip."
+  }
+]}
+  sampleChildren={[{"component":"Button","props":{"children":"Hover me"}}]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <Tooltip title="This is a helpful tooltip">
+      <Button>Hover me</Button>
+    </Tooltip>
+  );
+}
+```
+
+## Placements
+
+```tsx live
+function Placements() {
+  const placements = ['top', 'bottom', 'left', 'right', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'];
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+      {placements.map(placement => (
+        <Tooltip key={placement} title={placement} placement={placement}>
+          <Button>{placement}</Button>
+        </Tooltip>
+      ))}
+    </div>
+  );
+}
+```
+
+## Trigger Types
+
+```tsx live
+function Triggers() {
+  return (
+    <div style={{ display: 'flex', gap: 12 }}>
+      <Tooltip title="Hover trigger" trigger="hover">
+        <Button>Hover</Button>
+      </Tooltip>
+      <Tooltip title="Click trigger" trigger="click">
+        <Button>Click</Button>
+      </Tooltip>
+      <Tooltip title="Focus trigger" trigger="focus">
+        <Button>Focus</Button>
+      </Tooltip>
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | `"Simple tooltip text"` | Text or content shown in the tooltip. |
+| `mouseEnterDelay` | `number` | `0.1` | Delay in seconds before showing the tooltip on hover. |
+| `mouseLeaveDelay` | `number` | `0.1` | Delay in seconds before hiding the tooltip after mouse leave. |
+
+## Import
+
+```tsx
+import { Tooltip } 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/Tooltip/Tooltip.stories.tsx).
+:::

docs/developer_docs/components/ui/tree.mdx

@@ -0,0 +1,268 @@
+---
+title: Tree
+sidebar_label: Tree
+---
+
+<!--
+    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';
+
+# Tree
+
+The Tree component is used to display hierarchical data in a tree structure. It allows for features such as selection, expansion, and drag-and-drop functionality.
+
+## Live Example
+
+<StoryWithControls
+  component="Tree"
+  props={{
+  checkable: false,
+  defaultExpandAll: false,
+  disabled: false,
+  draggable: false,
+  multiple: false,
+  selectable: true,
+  showIcon: false,
+  showLine: false,
+  treeData: [
+    {
+      title: "parent 1",
+      key: "0-0",
+      children: [
+        {
+          title: "parent 1-0",
+          key: "0-0-0",
+          children: [
+            {
+              title: "leaf",
+              key: "0-0-0-0"
+            },
+            {
+              title: "leaf",
+              key: "0-0-0-1"
+            },
+            {
+              title: "leaf",
+              key: "0-0-0-2"
+            }
+          ]
+        },
+        {
+          title: "parent 1-1",
+          key: "0-0-1",
+          children: [
+            {
+              title: "leaf",
+              key: "0-0-1-0"
+            }
+          ]
+        },
+        {
+          title: "parent 1-2",
+          key: "0-0-2",
+          children: [
+            {
+              title: "leaf",
+              key: "0-0-2-0"
+            },
+            {
+              title: "leaf",
+              key: "0-0-2-1"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  defaultExpandedKeys: [
+    "0-0",
+    "0-0-0"
+  ]
+}}
+  controls={[
+  {
+    name: "checkable",
+    label: "Checkable",
+    type: "boolean",
+    description: "Add a Checkbox before the treeNodes"
+  },
+  {
+    name: "defaultExpandAll",
+    label: "Default Expand All",
+    type: "boolean",
+    description: "Whether to expand all treeNodes by default"
+  },
+  {
+    name: "disabled",
+    label: "Disabled",
+    type: "boolean",
+    description: "Whether disabled the tree"
+  },
+  {
+    name: "draggable",
+    label: "Draggable",
+    type: "boolean",
+    description: "Specifies whether this Tree or the node is draggable"
+  },
+  {
+    name: "multiple",
+    label: "Multiple",
+    type: "boolean",
+    description: "Allows selecting multiple treeNodes"
+  },
+  {
+    name: "selectable",
+    label: "Selectable",
+    type: "boolean",
+    description: "Whether can be selected"
+  },
+  {
+    name: "showIcon",
+    label: "Show Icon",
+    type: "boolean",
+    description: "Controls whether to display the icon node"
+  },
+  {
+    name: "showLine",
+    label: "Show Line",
+    type: "boolean",
+    description: "Shows a connecting line"
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  const treeData = [
+    {
+      title: 'Databases',
+      key: 'databases',
+      children: [
+        { title: 'PostgreSQL', key: 'postgres' },
+        { title: 'MySQL', key: 'mysql' },
+        { title: 'SQLite', key: 'sqlite' },
+      ],
+    },
+    {
+      title: 'Charts',
+      key: 'charts',
+      children: [
+        { title: 'Bar Chart', key: 'bar' },
+        { title: 'Line Chart', key: 'line' },
+        { title: 'Pie Chart', key: 'pie' },
+      ],
+    },
+  ];
+  return <Tree treeData={treeData} defaultExpandAll />;
+}
+```
+
+## Checkable Tree
+
+```tsx live
+function CheckableTree() {
+  const [checkedKeys, setCheckedKeys] = React.useState(['postgres']);
+  const treeData = [
+    {
+      title: 'Databases',
+      key: 'databases',
+      children: [
+        { title: 'PostgreSQL', key: 'postgres' },
+        { title: 'MySQL', key: 'mysql' },
+      ],
+    },
+    {
+      title: 'Charts',
+      key: 'charts',
+      children: [
+        { title: 'Bar Chart', key: 'bar' },
+        { title: 'Line Chart', key: 'line' },
+      ],
+    },
+  ];
+  return (
+    <Tree
+      treeData={treeData}
+      checkable
+      defaultExpandAll
+      checkedKeys={checkedKeys}
+      onCheck={setCheckedKeys}
+    />
+  );
+}
+```
+
+## With Lines and Icons
+
+```tsx live
+function LinesAndIcons() {
+  const treeData = [
+    {
+      title: 'Dashboards',
+      key: 'dashboards',
+      children: [
+        { title: 'Sales Dashboard', key: 'sales' },
+        { title: 'Marketing Dashboard', key: 'marketing' },
+      ],
+    },
+    {
+      title: 'Reports',
+      key: 'reports',
+      children: [
+        { title: 'Weekly Report', key: 'weekly' },
+        { title: 'Monthly Report', key: 'monthly' },
+      ],
+    },
+  ];
+  return <Tree treeData={treeData} showLine showIcon defaultExpandAll />;
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `checkable` | `boolean` | `false` | Add a Checkbox before the treeNodes |
+| `defaultExpandAll` | `boolean` | `false` | Whether to expand all treeNodes by default |
+| `disabled` | `boolean` | `false` | Whether disabled the tree |
+| `draggable` | `boolean` | `false` | Specifies whether this Tree or the node is draggable |
+| `multiple` | `boolean` | `false` | Allows selecting multiple treeNodes |
+| `selectable` | `boolean` | `true` | Whether can be selected |
+| `showIcon` | `boolean` | `false` | Controls whether to display the icon node |
+| `showLine` | `boolean` | `false` | Shows a connecting line |
+| `treeData` | `any` | `[{"title":"parent 1","key":"0-0","children":[{"title":"parent 1-0","key":"0-0-0","children":[{"title":"leaf","key":"0-0-0-0"},{"title":"leaf","key":"0-0-0-1"},{"title":"leaf","key":"0-0-0-2"}]},{"title":"parent 1-1","key":"0-0-1","children":[{"title":"leaf","key":"0-0-1-0"}]},{"title":"parent 1-2","key":"0-0-2","children":[{"title":"leaf","key":"0-0-2-0"},{"title":"leaf","key":"0-0-2-1"}]}]}]` | - |
+| `defaultExpandedKeys` | `any` | `["0-0","0-0-0"]` | - |
+
+## Import
+
+```tsx
+import { Tree } 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/Tree/Tree.stories.tsx).
+:::

docs/developer_docs/components/ui/treeselect.mdx

@@ -0,0 +1,286 @@
+---
+title: TreeSelect
+sidebar_label: TreeSelect
+---
+
+<!--
+    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';
+
+# TreeSelect
+
+TreeSelect is a select component that allows users to select from a tree structure.
+
+## Live Example
+
+<StoryWithControls
+  component="TreeSelect"
+  props={{
+  allowClear: true,
+  disabled: false,
+  multiple: false,
+  placeholder: "Please select",
+  showSearch: true,
+  size: "middle",
+  treeCheckable: false,
+  treeDefaultExpandAll: true,
+  treeLine: false,
+  variant: "outlined",
+  treeData: [
+    {
+      title: "Node1",
+      value: "0-0",
+      children: [
+        {
+          title: "Child Node1",
+          value: "0-0-0"
+        },
+        {
+          title: "Child Node2",
+          value: "0-0-1"
+        }
+      ]
+    },
+    {
+      title: "Node2",
+      value: "0-1",
+      children: [
+        {
+          title: "Child Node3",
+          value: "0-1-0"
+        }
+      ]
+    }
+  ]
+}}
+  controls={[
+  {
+    name: "allowClear",
+    label: "Allow Clear",
+    type: "boolean",
+    description: "Whether to allow clearing the selected value."
+  },
+  {
+    name: "disabled",
+    label: "Disabled",
+    type: "boolean",
+    description: "Whether the component is disabled."
+  },
+  {
+    name: "multiple",
+    label: "Multiple",
+    type: "boolean",
+    description: "Whether to allow multiple selections."
+  },
+  {
+    name: "placeholder",
+    label: "Placeholder",
+    type: "text",
+    description: "Placeholder text for the input field."
+  },
+  {
+    name: "showSearch",
+    label: "Show Search",
+    type: "boolean",
+    description: "Whether to show the search input."
+  },
+  {
+    name: "size",
+    label: "Size",
+    type: "select",
+    options: [
+      "large",
+      "middle",
+      "small"
+    ],
+    description: "Size of the component."
+  },
+  {
+    name: "treeCheckable",
+    label: "Tree Checkable",
+    type: "boolean",
+    description: "Whether to show checkable tree nodes."
+  },
+  {
+    name: "treeDefaultExpandAll",
+    label: "Tree Default Expand All",
+    type: "boolean",
+    description: "Whether to expand all tree nodes by default."
+  },
+  {
+    name: "treeLine",
+    label: "Tree Line",
+    type: "boolean",
+    description: "Whether to show tree lines."
+  },
+  {
+    name: "variant",
+    label: "Variant",
+    type: "select",
+    options: [
+      "outlined",
+      "borderless",
+      "filled"
+    ],
+    description: "Variant of the component."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  const [value, setValue] = React.useState(undefined);
+  const treeData = [
+    {
+      title: 'Databases',
+      value: 'databases',
+      children: [
+        { title: 'PostgreSQL', value: 'postgres' },
+        { title: 'MySQL', value: 'mysql' },
+      ],
+    },
+    {
+      title: 'Charts',
+      value: 'charts',
+      children: [
+        { title: 'Bar Chart', value: 'bar' },
+        { title: 'Line Chart', value: 'line' },
+      ],
+    },
+  ];
+  return (
+    <TreeSelect
+      style={{ width: 300 }}
+      value={value}
+      onChange={setValue}
+      treeData={treeData}
+      placeholder="Select an item"
+      allowClear
+      treeDefaultExpandAll
+    />
+  );
+}
+```
+
+## Multiple Selection with Checkboxes
+
+```tsx live
+function MultiSelectTree() {
+  const [value, setValue] = React.useState([]);
+  const treeData = [
+    {
+      title: 'Databases',
+      value: 'databases',
+      children: [
+        { title: 'PostgreSQL', value: 'postgres' },
+        { title: 'MySQL', value: 'mysql' },
+        { title: 'SQLite', value: 'sqlite' },
+      ],
+    },
+    {
+      title: 'File Formats',
+      value: 'formats',
+      children: [
+        { title: 'CSV', value: 'csv' },
+        { title: 'Excel', value: 'excel' },
+      ],
+    },
+  ];
+  return (
+    <TreeSelect
+      style={{ width: 300 }}
+      value={value}
+      onChange={setValue}
+      treeData={treeData}
+      treeCheckable
+      placeholder="Select data sources"
+      treeDefaultExpandAll
+      allowClear
+    />
+  );
+}
+```
+
+## With Tree Lines
+
+```tsx live
+function TreeLinesDemo() {
+  const treeData = [
+    {
+      title: 'Dashboards',
+      value: 'dashboards',
+      children: [
+        { title: 'Sales Dashboard', value: 'sales' },
+        { title: 'Marketing Dashboard', value: 'marketing' },
+      ],
+    },
+    {
+      title: 'Charts',
+      value: 'charts',
+      children: [
+        { title: 'Revenue Chart', value: 'revenue' },
+        { title: 'User Growth', value: 'growth' },
+      ],
+    },
+  ];
+  return (
+    <TreeSelect
+      style={{ width: 300 }}
+      treeData={treeData}
+      treeLine
+      treeDefaultExpandAll
+      placeholder="Browse items"
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `allowClear` | `boolean` | `true` | Whether to allow clearing the selected value. |
+| `disabled` | `boolean` | `false` | Whether the component is disabled. |
+| `multiple` | `boolean` | `false` | Whether to allow multiple selections. |
+| `placeholder` | `string` | `"Please select"` | Placeholder text for the input field. |
+| `showSearch` | `boolean` | `true` | Whether to show the search input. |
+| `size` | `string` | `"middle"` | Size of the component. |
+| `treeCheckable` | `boolean` | `false` | Whether to show checkable tree nodes. |
+| `treeDefaultExpandAll` | `boolean` | `true` | Whether to expand all tree nodes by default. |
+| `treeLine` | `boolean` | `false` | Whether to show tree lines. |
+| `variant` | `string` | `"outlined"` | Variant of the component. |
+| `treeData` | `any` | `[{"title":"Node1","value":"0-0","children":[{"title":"Child Node1","value":"0-0-0"},{"title":"Child Node2","value":"0-0-1"}]},{"title":"Node2","value":"0-1","children":[{"title":"Child Node3","value":"0-1-0"}]}]` | - |
+
+## Import
+
+```tsx
+import { TreeSelect } 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/TreeSelect/TreeSelect.stories.tsx).
+:::

docs/developer_docs/components/ui/typography.mdx

@@ -0,0 +1,236 @@
+---
+title: Typography
+sidebar_label: Typography
+---
+
+<!--
+    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';
+
+# Typography
+
+Typography is a component for displaying text with various styles and formats. It includes subcomponents like Title, Paragraph, and Link.
+
+## Live Example
+
+<StoryWithControls
+  component="Typography"
+  renderComponent="Typography.Text"
+  props={{
+  children: "Sample Text",
+  code: false,
+  copyable: false,
+  delete: false,
+  disabled: false,
+  ellipsis: false,
+  keyboard: false,
+  mark: false,
+  italic: false,
+  underline: false,
+  strong: false
+}}
+  controls={[
+  {
+    name: "children",
+    label: "Children",
+    type: "text",
+    description: "The text content."
+  },
+  {
+    name: "code",
+    label: "Code",
+    type: "boolean",
+    description: "Code style."
+  },
+  {
+    name: "copyable",
+    label: "Copyable",
+    type: "boolean",
+    description: "Whether the text is copyable."
+  },
+  {
+    name: "delete",
+    label: "Delete",
+    type: "boolean",
+    description: "Deleted line style."
+  },
+  {
+    name: "disabled",
+    label: "Disabled",
+    type: "boolean",
+    description: "Disabled content."
+  },
+  {
+    name: "ellipsis",
+    label: "Ellipsis",
+    type: "boolean",
+    description: "Display ellipsis when text overflows."
+  },
+  {
+    name: "keyboard",
+    label: "Keyboard",
+    type: "boolean",
+    description: "Keyboard style."
+  },
+  {
+    name: "mark",
+    label: "Mark",
+    type: "boolean",
+    description: "Marked/highlighted style."
+  },
+  {
+    name: "italic",
+    label: "Italic",
+    type: "boolean",
+    description: "Italic style."
+  },
+  {
+    name: "underline",
+    label: "Underline",
+    type: "boolean",
+    description: "Underlined style."
+  },
+  {
+    name: "strong",
+    label: "Strong",
+    type: "boolean",
+    description: "Bold style."
+  },
+  {
+    name: "type",
+    label: "Type",
+    type: "select",
+    options: [
+      "secondary",
+      "success",
+      "warning",
+      "danger"
+    ],
+    description: "Text type for semantic coloring."
+  }
+]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <div>
+      <Typography.Text>Default Text</Typography.Text>
+      <br />
+      <Typography.Text type="secondary">Secondary</Typography.Text>
+      <br />
+      <Typography.Text type="success">Success</Typography.Text>
+      <br />
+      <Typography.Text type="warning">Warning</Typography.Text>
+      <br />
+      <Typography.Text type="danger">Danger</Typography.Text>
+      <br />
+      <Typography.Text code>Code</Typography.Text>
+      <br />
+      <Typography.Text keyboard>Keyboard</Typography.Text>
+      <br />
+      <Typography.Text mark>Marked</Typography.Text>
+      <br />
+      <Typography.Text underline>Underline</Typography.Text>
+      <br />
+      <Typography.Text delete>Deleted</Typography.Text>
+      <br />
+      <Typography.Text strong>Strong</Typography.Text>
+      <br />
+      <Typography.Text italic>Italic</Typography.Text>
+    </div>
+  );
+}
+```
+
+## All Subcomponents
+
+```tsx live
+function AllSubcomponents() {
+  return (
+    <div>
+      <Typography.Title level={2}>Typography Components</Typography.Title>
+      <Typography.Paragraph>
+        The Typography component includes several subcomponents for different text needs.
+        Use <Typography.Text strong>Title</Typography.Text> for headings,
+        <Typography.Text code>Text</Typography.Text> for inline text styling,
+        and <Typography.Text mark>Paragraph</Typography.Text> for block content.
+      </Typography.Paragraph>
+      <Typography.Link href="https://superset.apache.org" target="_blank">
+        Learn more about Apache Superset
+      </Typography.Link>
+    </div>
+  );
+}
+```
+
+## Text Styling Options
+
+```tsx live
+function TextStyles() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+      <Typography.Text code>Code style</Typography.Text>
+      <Typography.Text keyboard>Keyboard style</Typography.Text>
+      <Typography.Text mark>Highlighted text</Typography.Text>
+      <Typography.Text underline>Underlined text</Typography.Text>
+      <Typography.Text delete>Deleted text</Typography.Text>
+      <Typography.Text strong>Bold text</Typography.Text>
+      <Typography.Text italic>Italic text</Typography.Text>
+      <Typography.Text type="success">Success type</Typography.Text>
+      <Typography.Text type="warning">Warning type</Typography.Text>
+      <Typography.Text type="danger">Danger type</Typography.Text>
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `string` | `"Sample Text"` | The text content. |
+| `code` | `boolean` | `false` | Code style. |
+| `copyable` | `boolean` | `false` | Whether the text is copyable. |
+| `delete` | `boolean` | `false` | Deleted line style. |
+| `disabled` | `boolean` | `false` | Disabled content. |
+| `ellipsis` | `boolean` | `false` | Display ellipsis when text overflows. |
+| `keyboard` | `boolean` | `false` | Keyboard style. |
+| `mark` | `boolean` | `false` | Marked/highlighted style. |
+| `italic` | `boolean` | `false` | Italic style. |
+| `underline` | `boolean` | `false` | Underlined style. |
+| `strong` | `boolean` | `false` | Bold style. |
+
+## Import
+
+```tsx
+import { Typography } 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/Typography/Typography.stories.tsx).
+:::

docs/developer_docs/components/ui/unsavedchangesmodal.mdx

@@ -0,0 +1,126 @@
+---
+title: UnsavedChangesModal
+sidebar_label: UnsavedChangesModal
+---
+
+<!--
+    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';
+
+# UnsavedChangesModal
+
+The UnsavedChangesModal component from Superset's UI library.
+
+## Live Example
+
+<StoryWithControls
+  component="UnsavedChangesModal"
+  props={{
+  showModal: false,
+  title: "Unsaved Changes"
+}}
+  controls={[
+  {
+    name: "showModal",
+    label: "Show Modal",
+    type: "boolean",
+    description: "Whether the modal is visible."
+  },
+  {
+    name: "title",
+    label: "Title",
+    type: "text",
+    description: "Title text displayed in the modal header."
+  }
+]}
+  triggerProp="showModal"
+  onHideProp="onHide,handleSave,onConfirmNavigation"
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  const [show, setShow] = React.useState(false);
+  return (
+    <div>
+      <Button onClick={() => setShow(true)}>
+        Navigate Away (Unsaved Changes)
+      </Button>
+      <UnsavedChangesModal
+        showModal={show}
+        onHide={() => setShow(false)}
+        handleSave={() => { alert('Saved!'); setShow(false); }}
+        onConfirmNavigation={() => { alert('Discarded changes'); setShow(false); }}
+        title="Unsaved Changes"
+      >
+        If you don&apos;t save, changes will be lost.
+      </UnsavedChangesModal>
+    </div>
+  );
+}
+```
+
+## Custom Title
+
+```tsx live
+function CustomTitle() {
+  const [show, setShow] = React.useState(false);
+  return (
+    <div>
+      <Button onClick={() => setShow(true)}>
+        Close Without Saving
+      </Button>
+      <UnsavedChangesModal
+        showModal={show}
+        onHide={() => setShow(false)}
+        handleSave={() => setShow(false)}
+        onConfirmNavigation={() => setShow(false)}
+        title="You have unsaved dashboard changes"
+      >
+        Your dashboard layout and filter changes have not been saved.
+        Do you want to save before leaving?
+      </UnsavedChangesModal>
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `showModal` | `boolean` | `false` | Whether the modal is visible. |
+| `title` | `string` | `"Unsaved Changes"` | Title text displayed in the modal header. |
+
+## Import
+
+```tsx
+import { UnsavedChangesModal } 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/UnsavedChangesModal/UnsavedChangesModal.stories.tsx).
+:::

docs/developer_docs/components/ui/upload.mdx

@@ -0,0 +1,136 @@
+---
+title: Upload
+sidebar_label: Upload
+---
+
+<!--
+    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';
+
+# Upload
+
+Upload component for file selection and uploading. Supports drag-and-drop, multiple files, and different list display styles.
+
+## Live Example
+
+<StoryWithControls
+  component="Upload"
+  props={{
+  multiple: false,
+  disabled: false,
+  listType: "text",
+  showUploadList: true
+}}
+  controls={[
+  {
+    name: "multiple",
+    label: "Multiple",
+    type: "boolean",
+    description: "Support multiple file selection."
+  },
+  {
+    name: "disabled",
+    label: "Disabled",
+    type: "boolean",
+    description: "Disable the upload button."
+  },
+  {
+    name: "listType",
+    label: "List Type",
+    type: "select",
+    options: [
+      "text",
+      "picture",
+      "picture-card",
+      "picture-circle"
+    ],
+    description: "Built-in style for the file list display."
+  },
+  {
+    name: "showUploadList",
+    label: "Show Upload List",
+    type: "boolean",
+    description: "Whether to show the upload file list."
+  }
+]}
+  sampleChildren={[{"component":"Button","props":{"children":"Click to Upload"}}]}
+/>
+
+## Try It
+
+Edit the code below to experiment with the component:
+
+```tsx live
+function Demo() {
+  return (
+    <Upload>
+      <Button>Click to Upload</Button>
+    </Upload>
+  );
+}
+```
+
+## Picture Card Style
+
+```tsx live
+function PictureCard() {
+  return (
+    <Upload listType="picture-card">
+      + Upload
+    </Upload>
+  );
+}
+```
+
+## Drag and Drop
+
+```tsx live
+function DragDrop() {
+  return (
+    <Upload.Dragger>
+      <p style={{ fontSize: 48, color: '#999', margin: 0 }}>+</p>
+      <p>Click or drag file to this area to upload</p>
+      <p style={{ color: '#999' }}>Support for single or bulk upload.</p>
+    </Upload.Dragger>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `multiple` | `boolean` | `false` | Support multiple file selection. |
+| `disabled` | `boolean` | `false` | Disable the upload button. |
+| `listType` | `string` | `"text"` | Built-in style for the file list display. |
+| `showUploadList` | `boolean` | `true` | Whether to show the upload file list. |
+
+## Import
+
+```tsx
+import { Upload } 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/Upload/Upload.stories.tsx).
+:::