astro and shadcn

Lets go through how to configure a base astro project with tailwind and shadcn. Also why not some fonts.

1
2
  cd $(mktemp -d)
  pnpm create astro@latest

Tailwind

1
  pnpm dlx astro add tailwind

Say yes to evertyhing.

pages/index.astro

1
2
3
4
5
6
7
8
9
---
import "../styles/global.css";
---

<div class="flex flex-col items-center justify-center min-h-screen">
	<h1 class="text-4xl font-headings">Hello World</h1>

	<p>This is my fancy new font.</p>
</div>

Run

1
  pnpm run dev

And check it out.

Shadcn

Inside of tsconfig.json, add the compilerOptions:

1
2
3
4
5
6
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }

Inside of the project

1
2
3
  pnpm astro add react
  pnpm dlx shadcn@canary init
  pnpm install -D tailwindcss-animate

Adding an accordian

1
  pnpm dlx shadcn@latest add accordion

Then create src/components/faq.tsx

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
  import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
  } from "@/components/ui/accordion";

  export default function Faq() {
    return (
      <Accordion type="single" collapsible>
        <AccordionItem value="item-1">
          <AccordionTrigger>Is it accessible?</AccordionTrigger>
          <AccordionContent>
            Yes. It adheres to the WAI-ARIA design pattern.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>Is it styled?</AccordionTrigger>
          <AccordionContent>
            Yes. It comes with default styles that matches the other
            components&apos; aesthetic.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-3">
          <AccordionTrigger>Is it animated?</AccordionTrigger>
          <AccordionContent>
            Yes. It's animated by default, but you can disable it if you prefer.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    );
  }

And in src/pages/index.astro:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
  ---
  import '@fontsource/twinkle-star';
  import "../styles/global.css";
  import Faq from "@/components/faq.tsx";
  ---

  <div class="flex flex-col items-center justify-center min-h-screen">
  	<h1 class="text-4xl font-headings">Hello World</h1>

  	<p>This is my fancy new font.</p>

  	<Faq client:idle/>
  </div>

Add a custom font to tailwind

1
  pnpm add @fontsource/twinkle-star

Inside of page/index.astro

1
2
3
4
  ---
  import '@fontsource/twinkle-star';
  import "../styles/global.css";
  ---

And the in styles.css

1
2
3
@theme {
  --font-headings: "Twinkle Star", "sans-serif";
}

Magicui works also

1
2
  pnpm install motion
  pnpm dlx shadcn@latest add "https://magicui.design/r/terminal"

astro and shadcn

new tailwind version

Contents

Tailwind

Shadcn

Adding an accordian

Add a custom font to tailwind

Magicui works also

Fonts with NextJS

its easy but i needed to work it out

AI Coding

so many tokens