Full Stack for Front-End Developers: Build your first AWS Amplify and React App intro > Using AWS Amplify Studio Components Locally

Using AWS Amplify Studio Components Locally

Let’s show the React components created by Amplify Studio in our app.

Instruct

Run the Create React application development server through the CLI: npm run start. Keep this app running in the background so you can see its changes in the browser.
Go to /src/App.js and remove the return replace boilerplate with React Fragment:
```
function App() {
  return (
    <></>
  )
}
```

You can also delete existing entries.

Add NavBar component to the application.

import { NavBar } from './ui-components'

Then create a component instance in return

function App() {
  return (
    <>
      <NavBar />
    </>
  )
}

When you view the NavBar in the browser you will notice that it doesn’t span the entire page add the width=100% prop to the element:
```
<NavBar width="100%" />
```

Now render the collection of notes below the title:

import { NavBar, NoteUICollection} from './ui-components'

function App() {
  return (
    <>
      <NavBar width="100%" />
      <NoteUICollection />
    </>
  )
}

You will notice that the NavBar is really close to the notes, add a bottom margin.
```
<NavBar width="100%" marginBottom='20px' />
```

Add at the end of your index.css file. This will be helpful to make our composition look even better!

/* Add to the end of /src/index.css */
.modal {
  position: absolute;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  left: 0;
  right: 0;
  top: 100px;
  border: .5px solid gray;
}

.container {
  margin: 0 auto;
  max-width: 900px;
}

Wrap NoteUICollectiondiv with a class container so that they are displayed in the center of the page:

function App() {
  return (
    <>
      <NavBar width="100%" />
      <div className='container'>
        <NoteUICollection />
      </div>
    </>
  )
}

You can check the CreateNote form (when it’s not hidden) and it will add a new note to your UI!

import { CreateNote, NavBar, NoteUICollection, UpdateNote } from './ui-components'

function App() {
  return (
    <>
      <NavBar width="100%" />
      <div className='container'>
        <NoteUICollection />
      </div>
      <div className='modal' style={{display: 'none'}}>
        <CreateNote />
      </div>
      <div className='modal' style={{display: 'none'}}>
        <UpdateNote />
      </div>
    </>
  )
}

We have now created the basic user interface for our application.