Theme and styling pages

Astroship uses Tailwind ↗ to style your pages. We’ve included a number of components and styles to make it easy to get started. When you’re ready, you can customize the abstracted global styles to make Astroship your own.

Core concepts

1. Global styles

Global styles are defined in src/assets/global.css. You can modify these styles to change the look and feel of your app. In this file you’ll find:

Base styling using TailwindCSS
Custom components and utilities
Custom fonts
Shadcn-ui theme ↗

Bundled styles

Astroship includes a number of base components to get started. You can find these in src/assets/global.css under @layer components. They have a prefix of ui- to avoid conflicts with other design systems. These include:

ui-title            # Title text
ui-text             # Body text
ui-prose            # Spaced out paragraphs
ui-link             # Styled link
ui-bounded-page     # Bounded, centered container with gutter
ui-full-page        # Breakout container to take full width within ui-bounded-page

2. Extending global styles

Adding base styling and components

You can use @apply to use Tailwind in global.css to create base styles. For example, to add a custom button component you can add:

@layer components {
    .ui-button {
        @apply px-4 py-2 bg-blue-500 text-white rounded-md;
    }
}

Using base styling and components

All components and utilities defined in global.css are made available to your pages using a Tailwind plugin. You can use the component above in your pages:

<button class="ui-button">Get started</button>

And get the same completion and documentation as any other Tailwind classes.

Customizing themes

1. Application theme (Shadcn-ui)

Astroship uses shadcn-ui ↗ to provide a consistent look and feel for your app. You can customize the theme by replacing the bundled theme in src/assets/global.css with one from the shadcn-ui theme generator ↗.

2. Documentation theme (Starlight)

Astroship uses starlight ↗ to help you create documentation. You can customize the theme by replacing the bundled theme in src/assets/starlight.css with one from the starlight theme generator ↗.