diff --git a/packages/core/src/components/progress/progress-bar.md b/packages/core/src/components/progress/progress-bar.md
index a81c5b665f9..4bd86d9c214 100644
--- a/packages/core/src/components/progress/progress-bar.md
+++ b/packages/core/src/components/progress/progress-bar.md
@@ -16,13 +16,13 @@ Omitting `width` will result in an "indeterminate" progress meter that fills the
@## JavaScript API
The `ProgressBar` component is available in the __@blueprintjs/core__ package.
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
A `ProgressBar` is a simple stateless component that renders the appropriate HTML markup.
It supports a `value` prop between 0 and 1 that determines the width of the progress meter.
Omitting `value` will result in an "indeterminate" progress meter that fills the entire bar.
-Note that the CSS modifiers described in the [CSS API](#components.progress.bar.css)
+Note that the CSS modifiers described in the [CSS API](#core/components/progress/progress-bar.css-api)
are supported via the `className` prop.
@interface IProgressBarProps
diff --git a/packages/core/src/components/spinner/spinner.md b/packages/core/src/components/spinner/spinner.md
index c865d2dfc55..e166cc43031 100644
--- a/packages/core/src/components/spinner/spinner.md
+++ b/packages/core/src/components/spinner/spinner.md
@@ -6,14 +6,14 @@ Spinners indicate indeterminate progress.
You can create spinners manually by inserting their whole markup into your HTML.
Spinners created via markup use same modifier classes as the
-[React `Spinner` component](#components.progress.spinner.js).
+[React `Spinner` component](#core/components/progress/spinner.javascript-api).
@css pt-spinner
@## JavaScript API
The `Spinner` component is available in the __@blueprintjs/core__ package.
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
A `Spinner` is a simple stateless component that renders HTML/SVG markup.
It supports a `value` prop between 0 and 1 that determines how much of the track is filled by the
@@ -21,7 +21,7 @@ head. When this prop is defined, the spinner head will not spin but it will smoo
`value` updates. Omitting `value` will result in an "indeterminate" spinner where the head spins
indefinitely (this is the default appearance).
-Note that the CSS modifiers described in the [CSS API](#components.progress.spinner.css)
+Note that the CSS modifiers described in the [CSS API](#core/components/progress/spinner.css-api)
are supported via the `className` prop.
diff --git a/packages/core/src/components/tabs/tabs.md b/packages/core/src/components/tabs/tabs.md
index 44febc3212b..58ba78ce6ee 100644
--- a/packages/core/src/components/tabs/tabs.md
+++ b/packages/core/src/components/tabs/tabs.md
@@ -3,12 +3,12 @@
The `Tabs` JavaScript API is deprecated since v1.11.0
The following `Tabs` React components been deprecated in v1.11.0 favor of the [simpler and more flexible
- `Tabs2` API](#components.tabs2). `Tabs2` will replace `Tabs` in version 2.0. The CSS API has not been changed.
+ `Tabs2` API](#core/components/tabs2). `Tabs2` will replace `Tabs` in version 2.0. The CSS API has not been changed.
@## CSS API
-In addition to the [JavaScript API](#components.tabs.js), Blueprint also offers tab styles with the
+In addition to the [JavaScript API](#core/components/tabs2.javascript-api), Blueprint also offers tab styles with the
class `pt-tabs`. You should add the proper accessibility attributes (`role`, `aria-selected`, and
`aria-hidden`) if you choose to implement tabs with CSS.
@@ -21,11 +21,11 @@ JavaScript component does this by default).
@## Deprecated JavaScript API
- These components are deprecated since v1.11.0. Please use the [`Tabs2` API](#components.tabs2) instead.
+ These components are deprecated since v1.11.0. Please use the [`Tabs2` API](#core/components/tabs2) instead.
The `Tabs`, `TabList`, `Tab`, and `TabPanel` components are available in the __@blueprintjs/core__
-package. Make sure to review the [general usage docs for JS components](#components.usage).
+package. Make sure to review the [general usage docs for JS components](#blueprint.usage).
Four components are necessary to render tabs: `Tabs`, `TabList`, `Tab`, and `TabPanel`.
@@ -69,7 +69,7 @@ between these approaches.
@### Tabs props
- This component is deprecated since v1.11.0. Please use the [`Tabs2` API](#components.tabs2) instead.
+ This component is deprecated since v1.11.0. Please use the [`Tabs2` API](#core/components/tabs2) instead.
@interface ITabsProps
@@ -77,7 +77,7 @@ between these approaches.
@### Tab props
- This component is deprecated since v1.11.0. Please use the [`Tabs2` API](#components.tabs2) instead.
+ This component is deprecated since v1.11.0. Please use the [`Tabs2` API](#core/components/tabs2) instead.
@interface ITabProps
diff --git a/packages/core/src/components/tabs2/tabs2.md b/packages/core/src/components/tabs2/tabs2.md
index 28bc6627532..8904fbf697e 100644
--- a/packages/core/src/components/tabs2/tabs2.md
+++ b/packages/core/src/components/tabs2/tabs2.md
@@ -4,7 +4,7 @@ Tabs allow the user to switch between panels of content.
@## CSS API
-In addition to the [JavaScript API](#components.tabs.js), Blueprint also offers tab styles with the
+In addition to the [JavaScript API](#core/components/tabs2.javascript-api), Blueprint also offers tab styles with the
class `pt-tabs`. You should add the proper accessibility attributes (`role`, `aria-selected`, and
`aria-hidden`) if you choose to implement tabs with CSS.
@@ -34,7 +34,7 @@ JavaScript component does this by default).
The `Tabs2` and `Tab2` components are available in the __@blueprintjs/core__
-package. Make sure to review the [general usage docs for JS components](#components.usage).
+package. Make sure to review the [general usage docs for JS components](#blueprint.usage).
```tsx
import { Tab2, Tabs2 } from "@blueprintjs/core";
diff --git a/packages/core/src/components/tag/tag.md b/packages/core/src/components/tag/tag.md
index 60324c8f454..439007f8cef 100644
--- a/packages/core/src/components/tag/tag.md
+++ b/packages/core/src/components/tag/tag.md
@@ -22,7 +22,7 @@ will adapt to its container's background color.
@## JavaScript API
The `Tag` component is available in the __@blueprintjs/core__ package.
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
Tag components render `.pt-tag` elements with optional close buttons. Provide tag content as `children`.
diff --git a/packages/core/src/components/toast/toast.md b/packages/core/src/components/toast/toast.md
index 0a08f0c8ab5..6891192ae54 100644
--- a/packages/core/src/components/toast/toast.md
+++ b/packages/core/src/components/toast/toast.md
@@ -8,7 +8,7 @@ Similarly, focusing the toast (for example, by hitting the `tab` key) halts the
You can add one additional action button to a toast. You might use this to undo the user's action, for example.
-You can also apply the same visual intent styles to `Toast`s that you can to [`Button`s](components.button.css).
+You can also apply the same visual intent styles to `Toast`s that you can to [`Button`s](#core/components/button.css-api).
Toasts can be configured to appear at either the top or the bottom of an application window, and it is possible to
have more than one toast onscreen at a time.
@@ -18,7 +18,7 @@ have more than one toast onscreen at a time.
@## JavaScript API
The `Toast` and `Toaster` components are available in the __@blueprintjs/core__ package.
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
The `Toaster` component provides the static `create` method that returns a new `Toaster` instance, rendered into an
element attached to ``. (You can also specify the element to render into if desired.) A `Toaster` instance
@@ -92,12 +92,12 @@ Updating a key that does not exist is effectively a no-op.
@### React component
The `Toaster` React component is a stateful container for a single list of toasts. Internally, it
-uses [`Overlay`](#components.overlay) to manage children and transitions. It can be vertically
+uses [`Overlay`](#core/components/overlay) to manage children and transitions. It can be vertically
aligned along the top or bottom edge of its container (new toasts will slide in from that edge) and
horizontally aligned along the left edge, center, or right edge of its container.
-You should use [`Toaster.create`](#components.toaster.js.create), rather than using the `Toaster`
-component API directly in React, to avoid having to use `ref` to access the instance.
+You should use [`Toaster.create`](#core/components/toast.static-method), rather than using the
+`Toaster` component API directly in React, to avoid having to use `ref` to access the instance.
```tsx
import { Button, Position, Toaster } from "@blueprintjs/core";
diff --git a/packages/core/src/components/tooltip/tooltip.md b/packages/core/src/components/tooltip/tooltip.md
index b3cbed575eb..8050ad59fb3 100644
--- a/packages/core/src/components/tooltip/tooltip.md
+++ b/packages/core/src/components/tooltip/tooltip.md
@@ -7,7 +7,7 @@ Tooltips display a small string of text next to a target element.
@## JavaScript API
The `Tooltip` component is available in the __@blueprintjs/core__ package.
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
When creating a tooltip, you must specify both:
- its _content_, by setting the `content` prop, and
@@ -30,7 +30,7 @@ but you should keep it simple. If you need more space, consider using a popover
@### Controlled mode
The `Tooltip` component supports controlled mode in exactly the same way the `Popover` component
-does. Please refer to the [controlled mode documentation](#components.popover.js.controlled) for
+does. Please refer to the [controlled mode documentation](#core/components/popover.controlled-mode) for
`Popover` for details.
@### Inline tooltips
diff --git a/packages/core/src/components/tree/tree.md b/packages/core/src/components/tree/tree.md
index 223ef3ba71e..d282c8c22dc 100644
--- a/packages/core/src/components/tree/tree.md
+++ b/packages/core/src/components/tree/tree.md
@@ -4,7 +4,7 @@ Trees display hierarchical data.
@## CSS API
-See below for the [JavaScript API](#components.tree.js) for the `Tree` React component. However, you
+See below for the [JavaScript API](#core/components/tree.javascript-api) for the `Tree` React component. However, you
may also use the provided styles by themselves, without using the component.
@@ -17,10 +17,10 @@ may also use the provided styles by themselves, without using the component.
@## JavaScript API
The `Tree` component is available in the __@blueprintjs/core__ package.
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
`Tree` is a stateless component. Its contents are dictated by the `contents` prop, which is an array
-of `ITreeNode`s (see [below](#components.tree.js.treenode)). The tree is multi-rooted if `contents`
+of `ITreeNode`s (see [below](#components/tree.tree-node-interface)). The tree is multi-rooted if `contents`
contains more than one top-level object.
A variety of interaction callbacks are also exposed as props. All interaction callbacks supply a
diff --git a/packages/core/src/docs/colors.md b/packages/core/src/docs/colors.md
index a972bb9832d..2be33b5f1d9 100644
--- a/packages/core/src/docs/colors.md
+++ b/packages/core/src/docs/colors.md
@@ -8,7 +8,7 @@ the `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from "@bl
Black, white and everything in between. The gray scale should be used for
the main UI frame: containers, headers, sections, boxes, etc.
If you need to call attention to a particular element (buttons, icons, tooltips, etc.),
-use one of the [core colors](#colors.core).
+use one of the [core colors](#colors.core-colors).
@reactDocs GrayscalePalette
@@ -38,7 +38,7 @@ Extended colors should typically be reserved for data visualizations: any time
you need to represent data of some sort, you can use these.
These colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)
accessibility standards and should therefore not be used for typical user
-interface design — take a look at [core colors](#colors.core) instead.
+interface design — take a look at [core colors](#colors.core-colors) instead.
@reactDocs ExtendedColorsPalette
diff --git a/packages/core/src/docs/variables.md b/packages/core/src/docs/variables.md
index e53fcdcb49a..b45271d9392 100644
--- a/packages/core/src/docs/variables.md
+++ b/packages/core/src/docs/variables.md
@@ -68,7 +68,7 @@ without writing much CSS. Here are some resources for learning flexbox:
@## Layering
Blueprint provides variables for three z-index layers. This should be enough for most use cases,
-especially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)
+especially if you make correct use of [stacking context][MDN]. [Overlay](#core/components/overlay)
components such as dialogs and popovers use these z-index values to configure their stacking
contexts.
diff --git a/packages/datetime/src/dateinput.md b/packages/datetime/src/dateinput.md
index 4c89e0efdf5..7554d226790 100644
--- a/packages/datetime/src/dateinput.md
+++ b/packages/datetime/src/dateinput.md
@@ -1,7 +1,7 @@
@# Date input
-The `DateInput` component is an [input group](#components.forms.input-group) with a calendar button
-that shows a [`DatePicker`](#components.datetime.datepicker) in a [`Popover`](#components.popover).
+The `DateInput` component is an [input group](#core/components/forms/input-group) with a calendar button
+that shows a [`DatePicker`](#datetime/datepicker) in a [`Popover`](#core/components/popover).
Use the `onChange` function to listen for changes to the selected date. Use `onError` to listen for
invalid entered dates.
@@ -16,7 +16,7 @@ Use this component in forms where the user must enter a date.
@## JavaScript API
The `DateInput` component is available in the __@blueprintjs/datetime__ package.
-Make sure to review the [general usage docs for date & time components](#components.datetime).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
```tsx
import { DateInput } from "@blueprintjs/datetime";
diff --git a/packages/datetime/src/datepicker.md b/packages/datetime/src/datepicker.md
index 7f2b92315fa..e4993c1f468 100644
--- a/packages/datetime/src/datepicker.md
+++ b/packages/datetime/src/datepicker.md
@@ -20,7 +20,7 @@ for an example of defining `localeUtils` functions using Moment.js.
@## JavaScript API
The `DatePicker` component is available in the __@blueprintjs/datetime__ package.
-Make sure to review the [general usage docs for date & time components](#components.datetime).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
Some props are managed by the `DatePicker` component, while others are passed
to the **react-day-picker** library. These passed props are documented in full
diff --git a/packages/datetime/src/daterangeinput.md b/packages/datetime/src/daterangeinput.md
index d9fcad00d98..18a3d1efc98 100644
--- a/packages/datetime/src/daterangeinput.md
+++ b/packages/datetime/src/daterangeinput.md
@@ -1,8 +1,8 @@
@# Date range input
-The `DateRangeInput` component is a [control group](#components.forms.control-group) composed of two
-[input groups](#components.forms.input-group). It shows a
-[`DateRangePicker`](#components.datetime.daterangepicker) in a [`Popover`](#components.popover) on focus.
+The `DateRangeInput` component is a [control group](#core/components/forms/control-group) composed of two
+[input groups](#core/components/forms/input-group). It shows a
+[`DateRangePicker`](#datetime/daterangepicker) in a [`Popover`](#core/components/popover) on focus.
Use this component in forms where the user must enter a date range.
@@ -11,7 +11,7 @@ Use this component in forms where the user must enter a date range.
@## JavaScript API
The `DateRangeInput` component is available in the __@blueprintjs/datetime__ package.
-Make sure to review the [general usage docs for date & time components](#components.datetime).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
Use the `onChange` function to listen for changes to the selected date. Use `onError` to listen for
invalid entered dates or date ranges.
diff --git a/packages/datetime/src/daterangepicker.md b/packages/datetime/src/daterangepicker.md
index 06a1c1d967e..4c2df006492 100644
--- a/packages/datetime/src/daterangepicker.md
+++ b/packages/datetime/src/daterangepicker.md
@@ -19,7 +19,7 @@ Semantically:
@## JavaScript API
The `DateRangePicker` component is available in the __@blueprintjs/datetime__ package.
-Make sure to review the [general usage docs for date & time components](#components.datetime).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
```tsx
import { DateRangePicker } from "@blueprintjs/datetime";
diff --git a/packages/datetime/src/datetimepicker.md b/packages/datetime/src/datetimepicker.md
index ba957224571..2320b1e6197 100644
--- a/packages/datetime/src/datetimepicker.md
+++ b/packages/datetime/src/datetimepicker.md
@@ -1,7 +1,7 @@
@# Date time picker
-A combined component consisting of a [`DatePicker`](#components.datetime.datepicker)
-and a [`TimePicker`](#components.datetime.timepicker).
+A combined component consisting of a [`DatePicker`](#datetime/datepicker)
+and a [`TimePicker`](#datetime/timepicker).
Use the `onChange` prop to listen for changes to the selected date and time. You can control the
selected date and time by setting the `value` prop, or use the component in uncontrolled
@@ -16,7 +16,7 @@ You can pass props to the inner `DatePicker` and `TimePicker` components using
@## JavaScript API
The `DateTimePicker` component is available in the __@blueprintjs/datetime__ package.
-Make sure to review the [general usage docs for date & time components](#components.datetime).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
```tsx
import { DateTimePicker } from "@blueprintjs/datetime";
diff --git a/packages/datetime/src/timepicker.md b/packages/datetime/src/timepicker.md
index f4795854e06..69acb8719e8 100644
--- a/packages/datetime/src/timepicker.md
+++ b/packages/datetime/src/timepicker.md
@@ -18,6 +18,6 @@ application if needed.
@## JavaScript API
The `TimePicker` component is available in the __@blueprintjs/datetime__ package.
-Make sure to review the [general usage docs for date & time components](#components.datetime).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
@interface ITimePickerProps
diff --git a/packages/docs-site/src/blueprint.md b/packages/docs-site/src/blueprint.md
index 27c6d87bd75..132016d8533 100644
--- a/packages/docs-site/src/blueprint.md
+++ b/packages/docs-site/src/blueprint.md
@@ -198,7 +198,7 @@ npm install --save @blueprintjs/core react react-dom react-addons-css-transition
Import components from the `@blueprintjs/core` module into your project.
Don't forget to include the main CSS stylesheet too!
-**Review the [general usage docs](#components.usage) for more complete installation instructions.**
+**Review the [general usage docs](#blueprint.usage) for more complete installation instructions.**
@## Understanding TypeScript
diff --git a/packages/table/src/docs.md b/packages/table/src/docs.md
index 5e09e05f6e7..2b7716c3838 100644
--- a/packages/table/src/docs.md
+++ b/packages/table/src/docs.md
@@ -8,7 +8,7 @@ A highly interactive React `Table` component.
If you are looking instead for the Blueprint-styled HTML table, see
- [`.pt-table` in **@blueprintjs/core**](#core.components.table).
+ [`.pt-table` in **@blueprintjs/core**](#core/components/table).
### Features