dyesin · Sep 22, 2026 · Sep 17, 2026
@@ -214,7 +214,7 @@ On the other hand, we use
 transition: 0.3s cubic-bezier(0.2, 1, 0.1, 1);
 ```
 
-bellow to make the item fly back which gives user a nice additional feedback:
+below to make the item fly back which gives user a nice additional feedback:
 
 <BlogImage
   src="https://res.cloudinary.com/flycatcher/image/upload/v1572410952/drop2_vamnka.gif"

@@ -56,15 +56,15 @@ How can you tell that `Text` is the right override that targets the tag's conten
 
 ## Playground
 
-That's where the interactive playground at the top of each component page can greately help! (powered by [react-view](https://github.com/uber/react-view))
+That's where the interactive playground at the top of each component page can greatly help! (powered by [react-view](https://github.com/uber/react-view))
 
 <LiveEditorTag />
 
 Once you open the `Style Overrides` tab, you see the list of all available override identifiers. You can toggle them to visually highlight the related component part and change its styles as needed. At the same time, the code snippet is automatically updated so you can copy&paste the resulting output into your project without typing a single line of code.
 
 ## Nested Overrides
 
-Most of our compontents represent basic UI pieces: buttons, links, inputs or tags. However, some are more complex like [Date Picker](/components/datepicker) or [Select](/components/select). They provide a rich functionality and compose other existing Base Web components. We say that they have nested components. For example, Select nests these components:
+Most of our components represent basic UI pieces: buttons, links, inputs or tags. However, some are more complex like [Date Picker](/components/datepicker) or [Select](/components/select). They provide a rich functionality and compose other existing Base Web components. We say that they have nested components. For example, Select nests these components:
 
 - Icon
 - Spinner
@@ -89,7 +89,7 @@ So what if you want to customize Tag's color and corners as a part of the multiv
 
 While this recursive structure should be logical if you fully understand the concept of overrides, it might be a head scratcher at the beginning. We also did not provide a good individualized documentation for each instance when nested overrides are needed.
 
-This changes today! Our interactive playground now fully supports nested overrides and gets recursive when neccessary. This is a simplified playground for the Select component demonstrating the nested Tag style override:
+This changes today! Our interactive playground now fully supports nested overrides and gets recursive when necessary. This is a simplified playground for the Select component demonstrating the nested Tag style override:
 
 <LiveEditor />
 

@@ -32,7 +32,7 @@ text. Use this example as a reference if the options are known to the applicatio
   <FilteredOptions />
 </Example>
 
-Applications will often need to fetch suggestions from from a remote API. The example below shows how to make
+Applications will often need to fetch suggestions from a remote API. The example below shows how to make
 asynchronous requests on input change to populate the listbox.
 
 <Example title="Async options" path="combobox/async-options.tsx">

@@ -49,7 +49,7 @@ For more information on the design principles behind the Base map markers, pleas
   - The `small` can only have an icon as a content.
   - The `mediumText` can have a text content. It adds padding to the sides.
   - The `mediumIcon` can have an icon as a content. Displayed as a circle.
-- A fixed marker can have a label enhancer that can be poistioned at the `top`, `bottom`, `left`, `right` of the marker.
+- A fixed marker can have a label enhancer that can be positioned at the `top`, `bottom`, `left`, `right` of the marker.
 
 ### Start/End Enhancer sizing
 
@@ -135,7 +135,7 @@ A fixed map marker rendered inside of a [react-map-gl](https://visgl.github.io/r
   <ReactMapGLDragging />
 </Example>
 
-A draggable fixed map marker rendered inside of a [react-map-gl](https://visgl.github.io/react-map-gl/) view. Everytime the marker is dragged, the `dragging` prop is updated and the marker position is updated.
+A draggable fixed map marker rendered inside of a [react-map-gl](https://visgl.github.io/react-map-gl/) view. Every time the marker is dragged, the `dragging` prop is updated and the marker position is updated.
 
 <Exports
   component={FixedMarkerExports}

@@ -92,6 +92,6 @@ A consumer location puck rendered in a [react-map-gl](https://visgl.github.io/re
 
 <Exports
   component={LocationPuckExports}
-  title="Loction Puck exports"
+  title="Location Puck exports"
   path="baseui/map-marker"
 />
@@ -56,7 +56,7 @@ Unlike UI components that “flip” in dark mode, cards with rich illustrations
   <CustomColorMessageCard />
 </Example>
 
-When using a color outside of the Base Web primitive color pallete, use the `backgroundColorType` prop to indicate whether the color is light or dark. MessageCard will determine the appropriate font color accordingly.
+When using a color outside of the Base Web primitive color palette, use the `backgroundColorType` prop to indicate whether the color is light or dark. MessageCard will determine the appropriate font color accordingly.
 
 <Example title="Layout" path="message-card/layout.tsx">
   <LayoutMessageCard />

@@ -36,7 +36,7 @@ before exiting. By default, it will choose the shortest duration.
 </Example>
 
 In some circumstances, you will want to not auto-hide the snackbar and wait until a task
-completes. The example below shows `DURATION.inifinite` usage, how to manually dequeue a
+completes. The example below shows `DURATION.infinite` usage, how to manually dequeue a
 snackbar, as well as demonstrates the `progress` flag that will render a spinner element.
 
 <Example title="Infinite duration" path="snackbar/infinite-duration.tsx">

@@ -23,7 +23,7 @@ export default Layout;
 
 <Yard placeholderHeight={48} {...switchYardConfig} />
 
-Switches are used to allow users to to toggle an option on/off.
+Switches are used to allow users to toggle an option on/off.
 
 Switch is used as a toggle to allow the user to make a binary choice usually (but not limited) in
 the form of a yes/no or on/off suggestion. Switches are often used in product settings or as filter

@@ -106,7 +106,7 @@ export default () => (
 
 ## Modal
 
-Similarily to the Card component, text in the Modal should we wrapped in paragraphs too:
+Similarly to the Card component, text in the Modal should be wrapped in paragraphs too:
 
 ```js
 import * as React from "react";

@@ -13,7 +13,7 @@ Here is a summary of our recommendations for styling your project:
 
 - Start with [`useStyletron`](/components/use-styletron/). Apply styling directly to elements until you find a need to extract a styling pattern into a component. At this point use [`styled`](/components/styled/) to create a [styled component](https://www.styletron.org/react#styled-components) which can be reused, configured or extended.
 - When extending a styled component, prefer [`withStyle`](https://www.styletron.org/api-reference#withstyle) over [`$style`](https://www.styletron.org/react#style-prop) to create maintainable variations of your base component.
-- When styling parts of your application, try to use values from your theme object whereever possible. The current theme is always made available in the various styling utilities exported from Base Web.
+- When styling parts of your application, try to use values from your theme object wherever possible. The current theme is always made available in the various styling utilities exported from Base Web.
 - When customizing the look of Base Web components, first see if you can configure the theme object to achieve your desired look. If that doesn’t work, check if the component is a styled component. If it is, you can use `withStyle` to extend it. If it is not a styled component you will likely need to use the [overrides pattern](/guides/understanding-overrides/) to pass new styles through or even swap in your own component.
 - Remember that Base Web components are built with [Styletron](https://www.styletron.org/) styled components. These are all exported from their relevant modules and made targetable with overrides.
 

@@ -34,7 +34,7 @@ Think of this as something closer to Excel rather than a standard table.
 </Example>
 
 Base Web publishes two additional tables that are not quite as useful as the above, but may be appropriate
-in niche situtaions.
+in niche situations.
 
 First is the [`table-grid`](/components/table-grid). This table utilizes `css-grid`
 for layout which some developers prefer over the semantic table element. It will require a custom

@@ -186,7 +186,7 @@ const overrides = {
 const theme = createTheme(overrides);
 ```
 
-In this example, we first reassign our theme's accent color to a shade of magenta. Then we re-map the link colors to use our hot magenta accent color rather than the default colors. See the section on customizing colors for more information about how the various layers of color tokens map onto eachother.
+In this example, we first reassign our theme's accent color to a shade of magenta. Then we re-map the link colors to use our hot magenta accent color rather than the default colors. See the section on customizing colors for more information about how the various layers of color tokens map onto each other.
 
 Next we replace some of the default icons with custom icons. And lastly, we override the `DisplayLarge` typography level to use the `Georgia` font family without affecting the font size, weight, or line height properties (or any of the other typography levels).