Getting Started

Start using Rocketship in your Astro project

experimental

How to use Rocketship components?

There is no installation required to use Rocketship in your Astro project. You can copy and paste the components in your Astro project.

Please remember that rocketship is still experimental and the components may change.

Step 1: Copy and paste the components to your project

To use rocketship components, you can copy the components from the rocketship.run website.

Step 2: Import the Theme.astro file in your Layout.astro file

The recommend way is to import the Theme.astro in your layout.astro file.

For example, you Layout.astro file should look like this:

Layout.astro

---
import Theme  from '@components/Theme.astro'
---
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<Theme>
  <slot />
</Theme>

</body>
</html>

Step 3: Add aliases to your tsconfig.json file

We also recommend to use aliases in your Astro project.

For example, you can add the following to your tsconfig.json file:

tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@components/*": ["./src/components/*"]
    }
  }
}