ui icon indicating copy to clipboard operation
ui copied to clipboard

[bug] (docs): Astro installation guide uses className instead of class

Open ibnkhayatmed opened this issue 3 months ago • 3 comments

Describe the bug

The Astro installation documentation at Astro - shadcn/ui contains incorrect HTML syntax in the example code

The documentation shows code intended for an .astro file but incorrectly uses className (React/JSX syntax) instead of class (HTML standard syntax)

In the example code block for src/pages/index.astro, line 15 uses className="grid place-items-center h-screen content-center" but should use class="grid place-items-center h-screen content-center"

Affected component/components

Documentation (Installation guide)

How to reproduce

  1. Go to https://ui.shadcn.com/docs/installation/astro
  2. Follow the installation guide
  3. Copy the example code from the documentation
  4. Paste it into an .astro file
  5. Try to run the Astro project
  6. The className attribute will not be recognized and styling will not be applied correctly

Expected behavior: The code should work as documented Actual behavior: The className attribute is not valid in .astro files

System Info

- Browser: Any
- OS: Any  
- Astro: Any version
- Issue affects: Documentation only

Before submitting

  • [x] I've made research efforts and searched the documentation
  • [x] I've searched for existing issues

ibnkhayatmed avatar Sep 05 '25 15:09 ibnkhayatmed

I'm pretty sure you can just use className="exampleclass". Untitled Ui has the same thing going and had no issues..

VNRARA avatar Sep 11 '25 12:09 VNRARA

This isn't about whether it "works sometimes" but about keeping the docs consistent with Astro's standard syntax, new users might copy paste & run into unexpected issues

ibnkhayatmed avatar Sep 11 '25 13:09 ibnkhayatmed

I agree, ran into this 'issue', would be nice to see it getting fixed

Jdruwe avatar Nov 10 '25 15:11 Jdruwe