An example app built using Astro.

Astro is a dynamic static site generator that harmoniously integrates with Tailwind CSS. It empowers you to construct websites effortlessly and swiftly, all while maintaining optimal performance.

Features

This project is an experiment to see how a modern app, with features using MDX, Notion API and more, can be built using Astro.

Astro

Responsive, React components, Layouts, scripts and API routes.

MDX

Markdown and MDX support with amazing code styling.

PRISMA

ORM using Prisma; deploy to PlanetScale or Vercel.

Components

UI components built using Tailwind CSS.

NOTION as CMS

Use Notion as a CMS with the Notion API.

Typescript

Typescript support out of the box and some useful scripts.

You can configure the project to get data from Notion or MDX.

Proudly Open Source

This page is open source and powered by open source software.
The code is available on GitHub .

Add Star on GitHub

FAQs

What is this?
This is a astro template that uses tailwindcss and notion as CMS
We use pure js/ts for scripts functionality and some react components, why?
Because we want to keep the bundle size as small as possible, so we don't use any framework for the scripts
But I don't need React, can I remove it?
Of course, but some components use it and you'll have to edit these
Can I remove also tailwidcss?
I mean, you can, but you'll have to basically rewrite all the template, so I don't recommend it
I don't need dark mode, how can I remove it?
Dark mode is embedded into tailwindcss, so you can't remove it, but you can remove the switch from the navbar
How can I configure the Notion CMS
To configure Notion as CMS do the followings:
  • Clone the template for notion Notion Templatey
  • Update the .env with the db or pages that you want
  • Change the configuration in providers.config.ts file