Merge branch 'main' into feat/stepper

shadcn-ui · Jul 13, 2023 · 4d43cb1 · 4d43cb1
2 parents a29903f + 5e172fc
commit 4d43cb1
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 16 deletions.
diff --git a/apps/www/content/docs/cli.mdx b/apps/www/content/docs/cli.mdx
@@ -16,6 +16,7 @@ npx shadcn-ui@latest init
 You will be asked a few questions to configure `components.json`:
 
 ```txt showLineNumbers
+Would you like to use TypeScript (recommended)? no/yes
 Which style would you like to use? › Default
 Which color would you like to use as base color? › Slate
 Where is your global CSS file? › › app/globals.css

diff --git a/apps/www/content/docs/installation/astro.mdx b/apps/www/content/docs/installation/astro.mdx
@@ -109,6 +109,20 @@ import '@/styles/globals.css'
 ---
 ```
 
+### Update astro tailwind config
+
+To prevent serving the Tailwind base styles twice, we need to tell Astro not to apply the base styles, since we already include them in our own `globals.css` file. To do this, set the `applyBaseStyles` config option for the tailwind plugin in `astro.config.mjs` to `false`.
+
+```ts {3-5} showLineNumbers
+export default defineConfig({
+  integrations: [
+    tailwind({
+      applyBaseStyles: false,
+    }),
+  ],
+})
+```
+
 ### That's it
 
 You can now start adding components to your project.

diff --git a/apps/www/registry/default/example/card-with-form.tsx b/apps/www/registry/default/example/card-with-form.tsx
@@ -34,17 +34,17 @@ export default function CardWithForm() {
               <Input id="name" placeholder="Name of your project" />
             </div>
             <div className="flex flex-col space-y-1.5">
-              <Label htmlFor="name">Framework</Label>
+              <Label htmlFor="framework">Framework</Label>
               <Select>
-                <SelectTrigger>
+                <SelectTrigger id="framework">
                   <SelectValue placeholder="Select" />
-                  <SelectContent position="popper">
-                    <SelectItem value="next">Next.js</SelectItem>
-                    <SelectItem value="sveltekit">SvelteKit</SelectItem>
-                    <SelectItem value="astro">Astro</SelectItem>
-                    <SelectItem value="nuxt">Nuxt.js</SelectItem>
-                  </SelectContent>
                 </SelectTrigger>
+                <SelectContent position="popper">
+                  <SelectItem value="next">Next.js</SelectItem>
+                  <SelectItem value="sveltekit">SvelteKit</SelectItem>
+                  <SelectItem value="astro">Astro</SelectItem>
+                  <SelectItem value="nuxt">Nuxt.js</SelectItem>
+                </SelectContent>
               </Select>
             </div>
           </div>

diff --git a/apps/www/registry/new-york/example/card-with-form.tsx b/apps/www/registry/new-york/example/card-with-form.tsx
@@ -34,17 +34,17 @@ export default function CardWithForm() {
               <Input id="name" placeholder="Name of your project" />
             </div>
             <div className="flex flex-col space-y-1.5">
-              <Label htmlFor="name">Framework</Label>
+              <Label htmlFor="framework">Framework</Label>
               <Select>
-                <SelectTrigger>
+                <SelectTrigger id="framework">
                   <SelectValue placeholder="Select" />
-                  <SelectContent position="popper">
-                    <SelectItem value="next">Next.js</SelectItem>
-                    <SelectItem value="sveltekit">SvelteKit</SelectItem>
-                    <SelectItem value="astro">Astro</SelectItem>
-                    <SelectItem value="nuxt">Nuxt.js</SelectItem>
-                  </SelectContent>
                 </SelectTrigger>
+                <SelectContent position="popper">
+                  <SelectItem value="next">Next.js</SelectItem>
+                  <SelectItem value="sveltekit">SvelteKit</SelectItem>
+                  <SelectItem value="astro">Astro</SelectItem>
+                  <SelectItem value="nuxt">Nuxt.js</SelectItem>
+                </SelectContent>
               </Select>
             </div>
           </div>