diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index 3e4099ba4a..daec5bca7f 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -99,6 +99,7 @@ const sidebar = {
'/api/instance-methods',
'/api/directives',
'/api/special-attributes',
+ '/api/built-in-components.md',
{
title: 'Reactivity API',
collapsable: false,
diff --git a/src/api/built-in-components.md b/src/api/built-in-components.md
new file mode 100644
index 0000000000..4b576b77a3
--- /dev/null
+++ b/src/api/built-in-components.md
@@ -0,0 +1,214 @@
+# Built-In Components
+
+## component
+
+- **Props:**
+
+ - `is` - `string | ComponentDefinition | ComponentConstructor`
+
+- **Usage:**
+
+ A "meta component" for rendering dynamic components. The actual component to render is determined by the `is` prop:
+
+ ```html
+
+
+
+
+
+
+ ```
+
+- **See also:** [Dynamic Components](../guide/component-dynamic-async.html)
+
+## transition
+
+- **Props:**
+
+ - `name` - `string` Used to automatically generate transition CSS class names. e.g. `name: 'fade'` will auto expand to `.fade-enter`, `.fade-enter-active`, etc.
+ - `appear` - `boolean`, Whether to apply transition on initial render. Defaults to `false`.
+ - `persisted` - `boolean`. If true, indicates this is a transition that doesn't actually insert/remove the element, but toggles the show / hidden status instead. The transition hooks are injected, but will be skipped by the renderer. Instead, a custom directive can control the transition by calling the injected hooks (e.g. `v-show`).
+ - `css` - `boolean`. Whether to apply CSS transition classes. Defaults to `true`. If set to `false`, will only trigger JavaScript hooks registered via component events.
+ - `type` - `string`. Specifies the type of transition events to wait for to determine transition end timing. Available values are `"transition"` and `"animation"`. By default, it will automatically detect the type that has a longer duration.
+ - `mode` - `wtring` Controls the timing sequence of leaving/entering transitions. Available modes are `"out-in"` and `"in-out"`; defaults to simultaneous.
+ - `duration` - `number | {`enter`: number,`leave`: number }`. Specifies the duration of transition. By default, Vue waits for the first `transitionend` or `animationend` event on the root transition element.
+ - `enter-from-class` - `string`
+ - `leave-from-class` - `string`
+ - `appear-class` - `string`
+ - `enter-to-class` - `string`
+ - `leave-to-class` - `string`
+ - `appear-to-class` - `string`
+ - `enter-active-class` - `string`
+ - `leave-active-class` - `string`
+ - `appear-active-class` - `string`
+
+- **Events:**
+
+ - `before-enter`
+ - `before-leave`
+ - `enter`
+ - `leave`
+ - `after-enter`
+ - `after-leave`
+ - `enter-cancelled`
+ - `leave-cancelled` (`v-show` only)
+
+- **Usage:**
+
+ `` serve as transition effects for **single** element/component. The `` only applies the transition behavior to the wrapped content inside; it doesn't render an extra DOM element, or show up in the inspected component hierarchy.
+
+ ```html
+
+
+ toggled content
+
+
+
+
+
+
+
+
+
+ ```
+
+ ```js
+ const app = Vue.createApp({
+ ...
+ methods: {
+ transitionComplete (el) {
+ // for passed 'el' that DOM element as the argument, something ...
+ }
+ }
+ ...
+ })
+
+ app.mount('#transition-demo')
+ ```
+
+- **See also:** [Transitions: Entering, Leaving, and Lists](TODO)
+
+## transition-group
+
+- **Props:**
+
+ - `tag` - `string`, defaults to `span`.
+ - `move-class` - overwrite CSS class applied during moving transition.
+ - exposes the same props as `` except `mode`.
+
+- **Events:**
+
+ - exposes the same events as ``.
+
+- **Usage:**
+
+ `` serve as transition effects for **multiple** elements/components. The `` renders a real DOM element. By default it renders a ``, and you can configure what element it should render via the `tag` attribute.
+
+ Note that every child in a `` must be [**uniquely keyed**](./special-attributes.html#key) for the animations to work properly.
+
+ `` supports moving transitions via CSS transform. When a child's position on screen has changed after an update, it will get applied a moving CSS class (auto generated from the `name` attribute or configured with the `move-class` attribute). If the CSS `transform` property is "transition-able" when the moving class is applied, the element will be smoothly animated to its destination using the [FLIP technique](https://aerotwist.com/blog/flip-your-animations/).
+
+ ```html
+
+
+ {{ item.text }}
+
+
+ ```
+
+- **See also:** [Transitions: Entering, Leaving, and Lists](TODO)
+
+## keep-alive
+
+- **Props:**
+
+ - `include` - `string | RegExp | Array`. Only components with matching names will be cached.
+ - `exclude` - `string | RegExp | Array`. Any component with a matching name will not be cached.
+ - `max` - `number | string`. The maximum number of component instances to cache.
+
+- **Usage:**
+
+ When wrapped around a dynamic component, `` caches the inactive component instances without destroying them. Similar to ``, `` is an abstract component: it doesn't render a DOM element itself, and doesn't show up in the component parent chain.
+
+ When a component is toggled inside ``, its `activated` and `deactivated` lifecycle hooks will be invoked accordingly.
+
+ Primarily used to preserve component state or avoid re-rendering.
+
+ ```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ```
+
+ Note, `` is designed for the case where it has one direct child component that is being toggled. It does not work if you have `v-for` inside it. When there are multiple conditional children, as above, `` requires that only one child is rendered at a time.
+
+- **`include` and `exclude`**
+
+ The `include` and `exclude` props allow components to be conditionally cached. Both props can be a comma-delimited string, a RegExp or an Array:
+
+ ```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ```
+
+ The match is first checked on the component's own `name` option, then its local registration name (the key in the parent's `components` option) if the `name` option is not available. Anonymous components cannot be matched against.
+
+- **`max`**
+
+ The maximum number of component instances to cache. Once this number is reached, the cached component instance that was least recently accessed will be destroyed before creating a new instance.
+
+ ```html
+
+
+
+ ```
+
+ ::: warning
+ `` does not work with functional components because they do not have instances to be cached.
+ :::
+
+- **See also:** [Dynamic Components - keep-alive](../guide/component-dynamic-async.html#dynamic-components-with-keep-alive)
+
+## slot
+
+- **Props:**
+
+ - `name` - `string`, Used for named slot.
+
+- **Usage:**
+
+ `` serve as content distribution outlets in component templates. `` itself will be replaced.
+
+ For detailed usage, see the guide section linked below.
+
+- **See also:** [Content Distribution with Slots](../guide/component-basics.html#content-distribution-with-slots)
diff --git a/src/api/instance-properties.md b/src/api/instance-properties.md
index f5c29fadd2..e01e22d39b 100644
--- a/src/api/instance-properties.md
+++ b/src/api/instance-properties.md
@@ -114,7 +114,7 @@
```
- **See also:**
- - [`` Component](TODO)
+ - [`` Component](built-in-components.html#slot)
- [Content Distribution with Slots](../guide/component-basics.html#content-distribution-with-slots)
- [Render Functions - Slots](..guide/render-function.html#slots)
diff --git a/src/guide/component-dynamic-async.md b/src/guide/component-dynamic-async.md
index 4035f19c78..3619a4e8ab 100644
--- a/src/guide/component-dynamic-async.md
+++ b/src/guide/component-dynamic-async.md
@@ -41,7 +41,7 @@ Check out the result below:
Now the _Posts_ tab maintains its state (the selected post) even when it's not rendered.
-Check out more details on `` in the [API reference](TODO:../api/#keep-alive).
+Check out more details on `` in the [API reference](../api/built-in-components.html#keep-alive).
## Async Components