Prerequisites

Before using Tempa UI components, make sure you have an Astro project with Tailwind CSS set up. If you haven't already, create one:

npm create astro@latest my-project -- --template basics
cd my-project
npx astro add tailwind

Using the Components

Tempa UI is not an npm package, it's just a collection of copy-paste ready components. There's nothing to install. Just grab the component file you need and drop it into your project.

1. Browse the components page and find the component you want.
2. Open its documentation page and copy the source code.
3. Paste the .astro file into your src/components/ folder.
4. Import and use it like any other Astro component.

What You'll Need

• Astro — all components are plain .astro files.
• Tailwind CSS v4 — the components use Tailwind utility classes for styling.

That's it. No framework, no build step, no hidden dependencies. Just Astro, Tailwind, and the component you need.