--- title: Usage status: published author: steveruizok date: 3/22/2023 order: 2 --- The [``](/gen/tldraw/Tldraw) component is the easiest way to get started. To use it, create a file like this one: ```tsx import { Tldraw } from '@tldraw/tldraw' import '@tldraw/tldraw/tldraw.css' export default function () { return (
) } ``` ### CSS In order to use the [``](/gen/tldraw/Tldraw) component, you should also import the `tldraw.css` file from the `@tldraw/tldraw` package. You can alternatively import this file inside of another CSS file using the `@import` syntax. You can overwrite these files with other CSS or copy the contents into a different file and import that instead. ### HTML If you're using the [``](/gen/tldraw/Tldraw) component in a full-screen app, you probably also want to update your `index.html`'s meta viewport element as shown below. ```html ``` This may not be critical to [``](/gen/tldraw/Tldraw) performing correctly, however some features (such as safe area positioning) will only work correctly if these viewport options are set. ## Using in Next.js, Create React App, Vite, etc. Check the [examples repository](https://github.com/tldraw/examples) to see examples of tldraw being used in various frameworks. By the way, the [``](/gen/tldraw/Tldraw) component can't be server-rendered. If you're using the component in a server-rendered framework (such as Next.js) then you need to import it dynamically. ## Going deeper The [``](/gen/tldraw/Tldraw) component combines two lower-level components: [``](/gen/editor/TldrawEditor) and [``](gen/ui/TldrawUi). If you want to have more granular control, you can use those lower-level components directly. See [this example](https://github.com/tldraw/tldraw/blob/main/apps/examples/src/5-exploded/ExplodedExample.tsx) for reference.