diff --git a/pages/components/docs/getting-started.md b/pages/components/docs/getting-started.md index 6e63bf5ea90..7e6b7e02289 100644 --- a/pages/components/docs/getting-started.md +++ b/pages/components/docs/getting-started.md @@ -1 +1,49 @@ -### Coming soon +# Getting Started + +To get started using Primer Components, run `npm install @primer/components` in your application. + +You can now start importing Primer Components! There are a few ways to import Primer Components. You can either: + +Import them individually from the main bundle: + +``` +import {Box, Flex} from '@primer/components' +``` + +or, if you've configured your application to tree-shake with webpack, you can import them indivdually from the `src` folder: + +``` +import Box from '@primer/components/src/Box' +import Flex from '@primer/components/src/Flex' + +``` + + +## Installing Peer Dependencies + +Primer Components is shipped with a few libraries labeled as peer dependencies. These libraries are separated because they are commonly already installed in the host project. This keeps the bundle size down and allows you to specify the version number you'd like in your own project. + +Before getting started using Primer Components, make sure that the following libraries are installed in your host project: + +- `styled-components` at version 4.0.0 or higher +- `react` at versions 16.8.0 and higher + + +## BaseStyles + +In order to set basic color, font-family, and line-heights across your project, you will need to establish base Primer styles for your app by wrapping all of your Primer components in ``: + +```jsx +import {BaseStyles, Box, Heading} from '@primer/components' + +export default const MyApp = () => ( + + + Hello, world! +

This will get Primer text styles.

+ + +) +``` + +This will apply the same `color`, `font-family`, and `line-height` styles to the `` as [Primer CSS's base styles](https://github.com/primer/css/blob/master/src/base/base.scss#L15-L20). diff --git a/pages/doc-components/SideNav.js b/pages/doc-components/SideNav.js index b6efde09ec7..bd4700721ae 100644 --- a/pages/doc-components/SideNav.js +++ b/pages/doc-components/SideNav.js @@ -41,6 +41,17 @@ const SideNav = ({router}) => ( > + + + Getting Started + +