Astro shadcn/ui Template

To get a local development environment running, clone the repository, install dependencies using pnpm, and start the development server. The application will be available at http://localhost:4321.

git clone https://github.com/area44/astro-shadcn-ui-template
cd astro-shadcn-ui-template
pnpm install
pnpm dev

This template is pre-configured for shadcn/ui. To add new components (like Accordion or Dialog), you must first follow the official shadcn/ui Astro installation guide. Once the CLI/installation is configured, you can pick components from the shadcn/ui library and follow their specific usage instructions.

Note: Since shadcn/ui components are typically React-based, you may need to reference the Astro Framework Components guide to understand how to use React components within your Astro pages.

The Icons object provides a collection of SVG icon components. Each icon component accepts standard React.HTMLAttributes<SVGElement> props, allowing you to pass attributes like className, style, width, height, and other SVG properties directly to the icon.

import { Icons } from "@/components/Icons";

// Example usage with className for styling
const MyComponent = () => (
  <Icons.gitHub className="w-6 h-6 text-blue-500" />
);

The CommandMenu component provides a site-wide command palette for navigation and quick actions. It can be triggered by clicking a search button or by using the keyboard shortcut ⌘K (macOS) or Ctrl+K (Windows/Linux).

Inside the menu, users can search through available commands via a text input. The component includes built-in support for theme switching (light/dark) and navigation. To customize the menu, you can modify the commands array within the component to include your own CommandItem objects.

import { CommandMenu } from "@/components/CommandMenu";

// Usage in a layout or header
export default function Layout() {
  return (
    <header>
      <CommandMenu />
    </header>
  );
}

The ErrorBoundary component is a React class component used to catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of crashing the entire application.

When an error is caught, it renders a styled fallback UI containing:

• A 'Something went wrong' heading.
• The error message (if available).
• A 'Try again' button that calls resetErrorBoundary to attempt to clear the error state and re-render the children.

Wrap any component or section of your UI that is prone to runtime errors with <ErrorBoundary> to ensure a graceful degradation of the user experience.

import { ErrorBoundary } from "./components/ErrorBoundary";

function MyComponent() {
  return (
    <ErrorBoundary>
      <RiskyComponent />
    </ErrorBoundary>
  );
}

The MainNav component renders the primary site navigation based on the configuration defined in siteConfig.navItems. It automatically handles external links by applying target="_blank" and rel="noopener noreferrer" to any item marked with external: true.

It accepts standard HTML <nav> attributes via ...props and allows for custom styling through the className prop using the cn utility.

import { MainNav } from "@/components/MainNav";

// Usage in a layout or page
<MainNav className="my-custom-class" />

To add new functionality to the CommandMenu, define objects that conform to the CommandItem interface. Each item requires a unique id, a title, an icon component, and an action function that executes when the item is selected.

CommandItem Interface:

• id: string - A unique identifier for the command.
• title: string - The primary text displayed for the command.
• subtitle?: string - Optional descriptive text displayed below the title.
• icon: React.ComponentType<{ className?: string }> - A React component used as the command's icon.
• action: () => void - The function to execute when the command is clicked or selected.

interface CommandItem {
  id: string;
  title: string;
  subtitle?: string;
  icon: React.ComponentType<{ className?: string }>;
  action: () => void;
}