├── src
    ├── env.d.ts
    ├── lib
    │   └── utils.ts
    ├── components
    │   ├── Avatar.tsx
    │   ├── Footer.astro
    │   └── ui
    │   │   ├── avatar.tsx
    │   │   ├── button.tsx
    │   │   └── card.tsx
    ├── layouts
    │   └── Layout.astro
    ├── styles
    │   └── globals.css
    └── pages
    │   └── index.astro
├── public
    ├── opengraph.png
    └── favicon.svg
├── tsconfig.json
├── astro.config.mjs
├── components.json
├── .gitignore
├── package.json
├── LICENSE
├── tailwind.config.mjs
└── README.md


/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="astro/client" />
2 | 


--------------------------------------------------------------------------------
/public/opengraph.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dansholds/astro-shadcn-starter/HEAD/public/opengraph.png


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "astro/tsconfigs/strict",
 3 |   "compilerOptions": {
 4 |     "jsx": "react-jsx",
 5 |     "jsxImportSource": "react",
 6 |     "baseUrl": ".",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "./src/*"
10 |       ]
11 |     }
12 |   }
13 | }


--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'astro/config';
 2 | import react from "@astrojs/react";
 3 | 
 4 | import tailwind from "@astrojs/tailwind";
 5 | 
 6 | // https://astro.build/config
 7 | export default defineConfig({
 8 |   integrations: [
 9 |     react(), 
10 |     tailwind({
11 |       applyBaseStyles: false,
12 |     }),
13 |   ],
14 | });


--------------------------------------------------------------------------------
/src/components/Avatar.tsx:
--------------------------------------------------------------------------------
 1 | import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
 2 | 
 3 | export const AvatarComponent = ({ src, alt, fallbackText }: { src: string, alt: string, fallbackText: string }) => {
 4 |   return (
 5 |     <Avatar>
 6 |       <AvatarImage src={src} alt={alt} />
 7 |       <AvatarFallback>{fallbackText}</AvatarFallback>
 8 |     </Avatar>
 9 |   );
10 | };


--------------------------------------------------------------------------------
/src/components/Footer.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import Layout from "@/layouts/Layout.astro"
3 | ---
4 | <Layout title="GitCharts - GitHub Statistics">
5 | <footer class="text-center py-8">
6 | <p class="text-sm text-gray-500">© 2024 Astro x Shadcn Starter by <a href="https://x.com/grapplingdev" target="_blank" rel="noopener noreferrer" class="bg-black text-white hover:bg-slate transition-colors duration-300">Dan</a></p>
7 | </footer>


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": false,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.mjs",
 8 |     "css": "./src/styles/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils"
16 |   }
17 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # build output
 2 | dist/
 3 | 
 4 | # generated types
 5 | .astro/
 6 | 
 7 | # dependencies
 8 | node_modules/
 9 | 
10 | # logs
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # environment variables
17 | .env
18 | .env.production
19 | 
20 | # macOS-specific files
21 | .DS_Store
22 | 
23 | # jetbrains setting folder
24 | .idea/
25 | 
26 | # lock files
27 | package-lock.json
28 | 
29 | # vscode settings
30 | .vscode/


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
 2 |     <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
 3 |     <style>
 4 |         path { fill: #000; }
 5 |         @media (prefers-color-scheme: dark) {
 6 |             path { fill: #FFF; }
 7 |         }
 8 |     </style>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "zapping-zero",
 3 |   "type": "module",
 4 |   "version": "0.0.1",
 5 |   "scripts": {
 6 |     "dev": "astro dev",
 7 |     "start": "astro dev",
 8 |     "build": "astro check && astro build",
 9 |     "preview": "astro preview",
10 |     "astro": "astro"
11 |   },
12 |   "dependencies": {
13 |     "@astrojs/check": "^0.8.3",
14 |     "@astrojs/react": "^3.6.0",
15 |     "@astrojs/tailwind": "^5.1.0",
16 |     "@fontsource-variable/space-grotesk": "^5.0.18",
17 |     "@radix-ui/react-accordion": "^1.2.0",
18 |     "@radix-ui/react-avatar": "^1.1.0",
19 |     "@radix-ui/react-slot": "^1.1.0",
20 |     "@types/react": "^18.3.3",
21 |     "@types/react-dom": "^18.3.0",
22 |     "astro": "^4.12.2",
23 |     "class-variance-authority": "^0.7.0",
24 |     "clsx": "^2.1.1",
25 |     "lucide-react": "^0.417.0",
26 |     "react": "^18.3.1",
27 |     "react-dom": "^18.3.1",
28 |     "tailwind-merge": "^2.4.0",
29 |     "tailwindcss": "^3.4.7",
30 |     "tailwindcss-animate": "^1.0.7",
31 |     "typescript": "^5.5.4"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 dsh
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Avatar = React.forwardRef<
 7 |   React.ElementRef<typeof AvatarPrimitive.Root>,
 8 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
 9 | >(({ className, ...props }, ref) => (
10 |   <AvatarPrimitive.Root
11 |     ref={ref}
12 |     className={cn(
13 |       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
14 |       className
15 |     )}
16 |     {...props}
17 |   />
18 | ))
19 | Avatar.displayName = AvatarPrimitive.Root.displayName
20 | 
21 | const AvatarImage = React.forwardRef<
22 |   React.ElementRef<typeof AvatarPrimitive.Image>,
23 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
24 | >(({ className, ...props }, ref) => (
25 |   <AvatarPrimitive.Image
26 |     ref={ref}
27 |     className={cn("aspect-square h-full w-full", className)}
28 |     {...props}
29 |   />
30 | ))
31 | AvatarImage.displayName = AvatarPrimitive.Image.displayName
32 | 
33 | const AvatarFallback = React.forwardRef<
34 |   React.ElementRef<typeof AvatarPrimitive.Fallback>,
35 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
36 | >(({ className, ...props }, ref) => (
37 |   <AvatarPrimitive.Fallback
38 |     ref={ref}
39 |     className={cn(
40 |       "flex h-full w-full items-center justify-center rounded-full bg-muted",
41 |       className
42 |     )}
43 |     {...props}
44 |   />
45 | ))
46 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
47 | 
48 | export { Avatar, AvatarImage, AvatarFallback }
49 | 


--------------------------------------------------------------------------------
/src/layouts/Layout.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | interface Props {
 3 | 	title: string;
 4 | }
 5 | 
 6 | const { title } = Astro.props;
 7 | import '@fontsource-variable/space-grotesk';
 8 | ---
 9 | 
10 | <!doctype html>
11 | <html lang="en">
12 | 	<head>
13 | 		<meta charset="UTF-8" />
14 | 		<meta name="description" content="Astro x Shadcn Starter Template" />
15 | 		<meta name="viewport" content="width=device-width" />
16 | 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
17 | 		<meta name="generator" content={Astro.generator} />
18 | 		<title>{title}</title>
19 | 
20 | 		<!-- OpenGraph meta tags -->
21 | 		<meta property="og:title" content={title} />
22 | 		<meta property="og:description" content="Astro x Shadcn Starter Template" />
23 | 		<meta property="og:image" content="/opengraph.png?v=1" />
24 | 		<meta property="og:url" content="https://astroshadcnstarter.netlify.app" />
25 | 		<meta property="og:type" content="website" />
26 | 	</head>
27 | 	<body>
28 | 		<slot />
29 | 	</body>
30 | </html>
31 | <style is:global>
32 | 	:root {
33 | 		--accent: 136, 58, 234;
34 | 		--accent-light: 224, 204, 250;
35 | 		--accent-dark: 49, 10, 101;
36 | 		--accent-gradient: linear-gradient(
37 | 			45deg,
38 | 			rgb(var(--accent)),
39 | 			rgb(var(--accent-light)) 30%,
40 | 			white 60%
41 | 		);
42 | 	}
43 | 	html {
44 | 		font-family: system-ui, sans-serif;
45 | 		background: #13151a;
46 | 		background-size: 224px;
47 | 	}
48 | 	code {
49 | 		font-family:
50 | 			Menlo,
51 | 			Monaco,
52 | 			Lucida Console,
53 | 			Liberation Mono,
54 | 			DejaVu Sans Mono,
55 | 			Bitstream Vera Sans Mono,
56 | 			Courier New,
57 | 			monospace;
58 | 	}
59 | </style>
60 | 


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | )
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button"
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     )
52 |   }
53 | )
54 | Button.displayName = "Button"
55 | 
56 | export { Button, buttonVariants }
57 | 


--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-lg border bg-card text-card-foreground shadow-sm",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn(
39 |       "text-2xl font-semibold leading-none tracking-tight",
40 |       className
41 |     )}
42 |     {...props}
43 |   />
44 | ))
45 | CardTitle.displayName = "CardTitle"
46 | 
47 | const CardDescription = React.forwardRef<
48 |   HTMLParagraphElement,
49 |   React.HTMLAttributes<HTMLParagraphElement>
50 | >(({ className, ...props }, ref) => (
51 |   <p
52 |     ref={ref}
53 |     className={cn("text-sm text-muted-foreground", className)}
54 |     {...props}
55 |   />
56 | ))
57 | CardDescription.displayName = "CardDescription"
58 | 
59 | const CardContent = React.forwardRef<
60 |   HTMLDivElement,
61 |   React.HTMLAttributes<HTMLDivElement>
62 | >(({ className, ...props }, ref) => (
63 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64 | ))
65 | CardContent.displayName = "CardContent"
66 | 
67 | const CardFooter = React.forwardRef<
68 |   HTMLDivElement,
69 |   React.HTMLAttributes<HTMLDivElement>
70 | >(({ className, ...props }, ref) => (
71 |   <div
72 |     ref={ref}
73 |     className={cn("flex items-center p-6 pt-0", className)}
74 |     {...props}
75 |   />
76 | ))
77 | CardFooter.displayName = "CardFooter"
78 | 
79 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
80 | 


--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |   :root {
 7 |     --background: 0 0% 100%;
 8 |     --foreground: 222.2 84% 4.9%;
 9 |     --card: 0 0% 100%;
10 |     --card-foreground: 222.2 84% 4.9%;
11 |     --popover: 0 0% 100%;
12 |     --popover-foreground: 222.2 84% 4.9%;
13 |     --primary: 222.2 47.4% 11.2%;
14 |     --primary-foreground: 210 40% 98%;
15 |     --secondary: 210 40% 96.1%;
16 |     --secondary-foreground: 222.2 47.4% 11.2%;
17 |     --muted: 210 40% 96.1%;
18 |     --muted-foreground: 215.4 16.3% 46.9%;
19 |     --accent: 210 40% 96.1%;
20 |     --accent-foreground: 222.2 47.4% 11.2%;
21 |     --destructive: 0 84.2% 60.2%;
22 |     --destructive-foreground: 210 40% 98%;
23 |     --border: 214.3 31.8% 91.4%;
24 |     --input: 214.3 31.8% 91.4%;
25 |     --ring: 222.2 84% 4.9%;
26 |     --radius: 0.5rem;
27 |     --chart-1: 12 76% 61%;
28 |     --chart-2: 173 58% 39%;
29 |     --chart-3: 197 37% 24%;
30 |     --chart-4: 43 74% 66%;
31 |     --chart-5: 27 87% 67%;
32 |   }
33 | 
34 |   .dark {
35 |     --background: 222.2 84% 4.9%;
36 |     --foreground: 210 40% 98%;
37 |     --card: 222.2 84% 4.9%;
38 |     --card-foreground: 210 40% 98%;
39 |     --popover: 222.2 84% 4.9%;
40 |     --popover-foreground: 210 40% 98%;
41 |     --primary: 210 40% 98%;
42 |     --primary-foreground: 222.2 47.4% 11.2%;
43 |     --secondary: 217.2 32.6% 17.5%;
44 |     --secondary-foreground: 210 40% 98%;
45 |     --muted: 217.2 32.6% 17.5%;
46 |     --muted-foreground: 215 20.2% 65.1%;
47 |     --accent: 217.2 32.6% 17.5%;
48 |     --accent-foreground: 210 40% 98%;
49 |     --destructive: 0 62.8% 30.6%;
50 |     --destructive-foreground: 210 40% 98%;
51 |     --border: 217.2 32.6% 17.5%;
52 |     --input: 217.2 32.6% 17.5%;
53 |     --ring: 212.7 26.8% 83.9%;
54 |     --chart-1: 220 70% 50%;
55 |     --chart-2: 160 60% 45%;
56 |     --chart-3: 30 80% 55%;
57 |     --chart-4: 280 65% 60%;
58 |     --chart-5: 340 75% 55%;
59 |   }
60 | }
61 | 
62 | body, p, h1, h2, h3, h4, h5, h6 {
63 |   font-family: 'Space Grotesk Variable', sans-serif;
64 | }
65 | 
66 | @layer base {
67 |   * {
68 |     @apply border-border;
69 |   }
70 |   body {
71 |     @apply bg-background text-foreground;
72 |   }
73 | }


--------------------------------------------------------------------------------
/tailwind.config.mjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | export default {
 3 |   darkMode: ["class"],
 4 |   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"
 5 |   ],
 6 |   prefix: "",
 7 |   theme: {
 8 |     container: {
 9 |       center: true,
10 |       padding: "2rem",
11 |       screens: {
12 |         "2xl": "1400px",
13 |       },
14 |     },
15 |     extend: {
16 |       keyframes: {
17 |         "accordion-down": {
18 |           from: { height: "0" },
19 |           to: { height: "var(--radix-accordion-content-height)" },
20 |         },
21 |         "accordion-up": {
22 |           from: { height: "var(--radix-accordion-content-height)" },
23 |           to: { height: "0" },
24 |         },
25 |       },
26 |       animation: {
27 |         "accordion-down": "accordion-down 0.2s ease-out",
28 |         "accordion-up": "accordion-up 0.2s ease-out",
29 |       },
30 |       colors: {
31 |         border: "hsl(var(--border))",
32 |         input: "hsl(var(--input))",
33 |         ring: "hsl(var(--ring))",
34 |         background: "hsl(var(--background))",
35 |         foreground: "hsl(var(--foreground))",
36 |         primary: {
37 |           DEFAULT: "hsl(var(--primary))",
38 |           foreground: "hsl(var(--primary-foreground))",
39 |         },
40 |         secondary: {
41 |           DEFAULT: "hsl(var(--secondary))",
42 |           foreground: "hsl(var(--secondary-foreground))",
43 |         },
44 |         destructive: {
45 |           DEFAULT: "hsl(var(--destructive))",
46 |           foreground: "hsl(var(--destructive-foreground))",
47 |         },
48 |         muted: {
49 |           DEFAULT: "hsl(var(--muted))",
50 |           foreground: "hsl(var(--muted-foreground))",
51 |         },
52 |         accent: {
53 |           DEFAULT: "hsl(var(--accent))",
54 |           foreground: "hsl(var(--accent-foreground))",
55 |         },
56 |         popover: {
57 |           DEFAULT: "hsl(var(--popover))",
58 |           foreground: "hsl(var(--popover-foreground))",
59 |         },
60 |         card: {
61 |           DEFAULT: "hsl(var(--card))",
62 |           foreground: "hsl(var(--card-foreground))",
63 |         },
64 |       },
65 |       borderRadius: {
66 |         lg: "var(--radius)",
67 |         md: "calc(var(--radius) - 2px)",
68 |         sm: "calc(var(--radius) - 4px)",
69 |       },
70 |       keyframes: {
71 |         "accordion-down": {
72 |           from: { height: "0" },
73 |           to: { height: "var(--radix-accordion-content-height)" },
74 |         },
75 |         "accordion-up": {
76 |           from: { height: "var(--radix-accordion-content-height)" },
77 |           to: { height: "0" },
78 |         },
79 |       },
80 |       animation: {
81 |         "accordion-down": "accordion-down 0.2s ease-out",
82 |         "accordion-up": "accordion-up 0.2s ease-out",
83 |       },
84 |     },
85 |   },
86 |   plugins: [require("tailwindcss-animate")],
87 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Astro + Shadcn Starter
 2 | 
 3 | Welcome to the Astro + Shadcn Starter Template! This project is designed to help you get started quickly with [Astro](https://astro.build) and [Shadcn UI](https://ui.shadcn.com). It includes Tailwind CSS for styling and React for building interactive components.
 4 | 
 5 | ![astroxshadcn](https://github.com/user-attachments/assets/99b0b2a1-3ef9-4f28-a347-91c665279c2d)
 6 | 
 7 | ## Table of Contents
 8 | 
 9 | - [Features](#features)
10 | - [Getting Started](#getting-started)
11 | - [Project Structure](#project-structure)
12 | - [Usage](#usage)
13 | - [Important Notes About Astro & Shadcn](#important)
14 | 
15 | ## Features
16 | 
17 | - 🚀 **Astro** - Modern static site generator.
18 | - 🎨 **Shadcn UI** - Beautifully designed components built with Radix UI and Tailwind CSS.
19 | - 📦 **Tailwind CSS** - Utility-first CSS framework.
20 | - 🔥 **React** - Library for building user interfaces.
21 | 
22 | ## Getting Started
23 | 
24 | Follow these instructions to set up the project locally.
25 | 
26 | ### Prerequisites
27 | 
28 | Ensure you have the following installed:
29 | 
30 | - [Node.js](https://nodejs.org/en/download/)
31 | - [npm](https://www.npmjs.com/get-npm)
32 | 
33 | ### Installation
34 | 
35 | 1. **Clone the repository**:
36 | 
37 |     ```sh
38 |     git clone https://github.com/your-username/astro-shadcn-starter.git
39 |     cd astro-shadcn-starter
40 |     ```
41 | 
42 | 2. **Install dependencies**:
43 | 
44 |     ```sh
45 |     npm install
46 |     ```
47 | 
48 | 3. **Start the development server**:
49 | 
50 |     ```sh
51 |     npm run dev
52 |     ```
53 | 
54 |     Open [http://localhost:3000](http://localhost:3000) in your browser to see the result.
55 | 
56 | ## Project Structure
57 | ```
58 | ├── public # Static assets
59 | ├── src
60 | │ ├── components # React components
61 | │ ├────ui # Shadcn installed components
62 | │ ├── layouts # Layout components
63 | │ ├── pages # Astro pages
64 | │ ├── styles # Global styles
65 | │ └── utils # Utility functions
66 | ├── astro.config.mjs # Astro configuration
67 | ├── tailwind.config.mjs # Tailwind CSS configuration
68 | └── package.json # Project metadata and dependencies
69 | ```
70 | 
71 | ## Usage
72 | 
73 | ### Adding a New Page
74 | 
75 | To add a new page, create a new `.astro` file in the `src/pages` directory.
76 | 
77 | Example:
78 | 
79 | ```astro
80 | ---
81 | import Layout from '../layouts/Layout.astro';
82 | ---
83 | 
84 | <Layout title="New Page">
85 |   <h1>New Page</h1>
86 |   <p>This is a new page.</p>
87 | </Layout>
88 | ```
89 | 
90 | ## Important
91 | 
92 | Due to the static and island based nature of Astro, a lot of Shadcn components won't work out of the box, 
93 | some components such as the Avatar require more work on your side to enable them to work (see `src/components/Avatar.tsx`).
94 | 
95 | You can find useful information on this from the following links:
96 | 
97 | - [Issues with Astro Islands when using Shadcn](https://github.com/shadcn-ui/ui/issues/2249)
98 | - [Abstract components into react, ts components](https://github.com/shadcn-ui/ui/issues/2890)
99 | 


--------------------------------------------------------------------------------
/src/pages/index.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Layout from '../layouts/Layout.astro';
 3 | import '@/styles/globals.css';
 4 | 
 5 | import { buttonVariants } from "@/components/ui/button";
 6 | import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
 7 | import { AvatarComponent } from "../components/Avatar.tsx";
 8 | import Footer from '@/components/Footer.astro';
 9 | 
10 | ---
11 | 
12 | <Layout title="Welcome to Astro x Shadcn Starter">
13 |   <main class="container mx-auto px-4 py-16 max-w-4xl">
14 |     <h1 class="text-5xl font-extrabold text-center mb-8 text-black-50">
15 |       Astro x Shadcn <span class="text-3xl block mt-2 font-normal">Starter Template</span>
16 |     </h1>
17 |     
18 |     <Card className="mb-12 shadow-lg">
19 |       <CardHeader>
20 |         <CardTitle>Getting Started</CardTitle>
21 |         <CardDescription>Your new project is ready to go!</CardDescription>
22 |       </CardHeader>
23 |       <CardContent>
24 |         <p class="mb-4">This starter template includes:</p>
25 |         <ul class="grid grid-cols-2 gap-4">
26 |           <li>🚀 Astro</li>
27 | 		  <li>🎨 Shadcn UI</li>
28 | 		  <li>📦 Tailwind CSS</li>
29 | 		  <li>🔥 React</li>
30 |         </ul>
31 |       </CardContent>
32 |       <CardFooter className="flex flex-col sm:flex-row justify-center sm:space-x-4 space-y-4 sm:space-y-0">
33 |         <a href="https://ui.shadcn.com/" class={`inline-block px-4 py-2 text-lg font-medium text-white bg-black-100 rounded-lg hover:bg-slate transition ${buttonVariants({ size: 'lg' })}`}>
34 |           Explore Shadcn Documentation
35 |         </a>
36 |         <a href="https://astro.build/docs" class={`inline-block px-4 py-2 text-lg font-medium text-white bg-black-100 rounded-lg hover:bg-slate transition ${buttonVariants({ size: 'lg' })}`}>
37 |           Explore Astro Documentation
38 |         </a>
39 |         <a href="https://github.com/dansholds/astro-shadcn-starter" class={`inline-block px-4 py-2 text-lg font-medium text-white bg-black-100 rounded-lg hover:bg-slate transition ${buttonVariants({ size: 'lg' })}`}>
40 |           View GitHub Repository
41 |         </a>
42 |       </CardFooter>
43 |     </Card>
44 | 
45 |     <div class="grid sm:grid-cols-2 gap-6">
46 |       <Card className="shadow-md hover:shadow-xl transition-shadow">
47 |         <CardHeader>
48 |           <CardTitle>
49 | 			<AvatarComponent client:load src="https://github.com/withastro.png" alt="Astro" fallbackText="Astro"/>
50 | 				Astro
51 |           </CardTitle>
52 |         </CardHeader>
53 |         <CardContent>
54 |           Build faster websites with less client-side JavaScript.
55 |         </CardContent>
56 |       </Card>
57 |       <Card className="shadow-md hover:shadow-xl transition-shadow">
58 |         <CardHeader>
59 |           <CardTitle>
60 | 			<AvatarComponent client:load src="https://github.com/shadcn.png" alt="Shadcn" fallbackText="Shadcn"/>
61 |             Shadcn UI
62 |           </CardTitle>
63 |         </CardHeader>
64 |         <CardContent>
65 |           Beautifully designed components built with Radix UI and Tailwind CSS.
66 |         </CardContent>
67 |       </Card>
68 |     </div>
69 |   </main>
70 |   <Footer />
71 | </Layout>


--------------------------------------------------------------------------------