Skip to content

Commit 4ddf54b

Browse files
shadcngithub-actions[bot]
shadcn
and
github-actions[bot]
committed
chore(release): version packages (#206)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
1 parent 7bf82eb commit 4ddf54b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+326
-6805
lines changed

‎.eslintrc.json

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,17 @@
1414
},
1515
"settings": {
1616
"tailwindcss": {
17-
"callees": ["cn"]
17+
"callees": ["cn"],
18+
"config": "./tailwind.config.js"
19+
},
20+
"next": {
21+
"rootDir": ["./"]
1822
}
19-
}
23+
},
24+
"overrides": [
25+
{
26+
"files": ["*.ts", "*.tsx"],
27+
"parser": "@typescript-eslint/parser"
28+
}
29+
]
2030
}

‎.vscode/settings.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"typescript.tsdk": "../../node_modules/.pnpm/[email protected]/node_modules/typescript/lib",
3+
"typescript.enablePromptUseWorkspaceTsdk": true
4+
}

‎README.md

Lines changed: 8 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -2,76 +2,21 @@
22

33
A Next.js 13 template for building apps with Radix UI and Tailwind CSS.
44

5+
## Usage
6+
7+
```bash
8+
npx create-next-app -e https://github.com/shadcn/next-template
9+
```
10+
511
## Features
612

713
- Radix UI Primitives
814
- Tailwind CSS
9-
- Fonts with `@next/font`
15+
- Fonts with `next/font`
1016
- Icons from [Lucide](https://lucide.dev)
1117
- Dark mode with `next-themes`
1218
- Automatic import sorting with `@ianvs/prettier-plugin-sort-imports`
13-
14-
## Tailwind CSS Features
15-
16-
- Class merging with `taiwind-merge`
17-
- Animation with `tailwindcss-animate`
18-
- Conditional classes with `clsx`
19-
- Variants with `class-variance-authority`
20-
- Automatic class sorting with `eslint-plugin-tailwindcss`
21-
22-
## Import Sort
23-
24-
The starter comes with `@ianvs/prettier-plugin-sort-imports` for automatically sort your imports.
25-
26-
### Input
27-
28-
```tsx
29-
import * as React from "react"
30-
import Link from "next/link"
31-
32-
import { siteConfig } from "@/config/site"
33-
import { buttonVariants } from "@/components/ui/button"
34-
import "@/styles/globals.css"
35-
import { twMerge } from "tailwind-merge"
36-
37-
import { NavItem } from "@/types/nav"
38-
import { cn } from "@/lib/utils"
39-
```
40-
41-
### Output
42-
43-
```tsx
44-
import * as React from "react"
45-
// React is always first.
46-
import Link from "next/link"
47-
// Followed by next modules.
48-
import { twMerge } from "tailwind-merge"
49-
50-
// Followed by third-party modules
51-
// Space
52-
import "@/styles/globals.css"
53-
// styles
54-
import { NavItem } from "@/types/nav"
55-
// types
56-
import { siteConfig } from "@/config/site"
57-
// config
58-
import { cn } from "@/lib/utils"
59-
// lib
60-
import { buttonVariants } from "@/components/ui/button"
61-
62-
// components
63-
```
64-
65-
### Class Merging
66-
67-
The `cn` util handles conditional classes and class merging.
68-
69-
### Input
70-
71-
```ts
72-
cn("px-2 bg-slate-100 py-2 bg-slate-200")
73-
// Outputs `p-2 bg-slate-200`
74-
```
19+
- Tailwind CSS class sorting, merging and linting.
7520

7621
## License
7722

‎app/layout.tsx

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import "@/styles/globals.css"
2+
import { Metadata } from "next"
3+
4+
import { siteConfig } from "@/config/site"
5+
import { fontSans } from "@/lib/fonts"
6+
import { cn } from "@/lib/utils"
7+
import { SiteHeader } from "@/components/site-header"
8+
import { TailwindIndicator } from "@/components/tailwind-indicator"
9+
import { ThemeProvider } from "@/components/theme-provider"
10+
11+
export const metadata: Metadata = {
12+
title: {
13+
default: siteConfig.name,
14+
template: `%s - ${siteConfig.name}`,
15+
},
16+
description: siteConfig.description,
17+
themeColor: [
18+
{ media: "(prefers-color-scheme: light)", color: "white" },
19+
{ media: "(prefers-color-scheme: dark)", color: "black" },
20+
],
21+
icons: {
22+
icon: "/favicon.ico",
23+
shortcut: "/favicon-16x16.png",
24+
apple: "/apple-touch-icon.png",
25+
},
26+
}
27+
28+
interface RootLayoutProps {
29+
children: React.ReactNode
30+
}
31+
32+
export default function RootLayout({ children }: RootLayoutProps) {
33+
return (
34+
<>
35+
<html lang="en" suppressHydrationWarning>
36+
<head />
37+
<body
38+
className={cn(
39+
"min-h-screen bg-background font-sans antialiased",
40+
fontSans.variable
41+
)}
42+
>
43+
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
44+
<div className="relative flex min-h-screen flex-col">
45+
<SiteHeader />
46+
<div className="flex-1">{children}</div>
47+
</div>
48+
<TailwindIndicator />
49+
</ThemeProvider>
50+
</body>
51+
</html>
52+
</>
53+
)
54+
}

‎app/page.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import Link from "next/link"
2+
3+
import { siteConfig } from "@/config/site"
4+
import { buttonVariants } from "@/components/ui/button"
5+
6+
export default function IndexPage() {
7+
return (
8+
<section className="container grid items-center gap-6 pb-8 pt-6 md:py-10">
9+
<div className="flex max-w-[980px] flex-col items-start gap-2">
10+
<h1 className="text-3xl font-extrabold leading-tight tracking-tighter sm:text-3xl md:text-5xl lg:text-6xl">
11+
Beautifully designed components <br className="hidden sm:inline" />
12+
built with Radix UI and Tailwind CSS.
13+
</h1>
14+
<p className="max-w-[700px] text-lg text-muted-foreground sm:text-xl">
15+
Accessible and customizable components that you can copy and paste
16+
into your apps. Free. Open Source. And Next.js 13 Ready.
17+
</p>
18+
</div>
19+
<div className="flex gap-4">
20+
<Link
21+
href={siteConfig.links.docs}
22+
target="_blank"
23+
rel="noreferrer"
24+
className={buttonVariants({ size: "lg" })}
25+
>
26+
Documentation
27+
</Link>
28+
<Link
29+
target="_blank"
30+
rel="noreferrer"
31+
href={siteConfig.links.github}
32+
className={buttonVariants({ variant: "outline", size: "lg" })}
33+
>
34+
GitHub
35+
</Link>
36+
</div>
37+
</section>
38+
)
39+
}

‎components/icons.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ export type Icon = LucideIcon
1212
export const Icons = {
1313
sun: SunMedium,
1414
moon: Moon,
15-
laptop: Laptop,
1615
twitter: Twitter,
1716
logo: (props: LucideProps) => (
1817
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>

‎components/main-nav.tsx

Lines changed: 1 addition & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,6 @@ import { NavItem } from "@/types/nav"
55
import { siteConfig } from "@/config/site"
66
import { cn } from "@/lib/utils"
77
import { Icons } from "@/components/icons"
8-
import { Button } from "@/components/ui/button"
9-
import {
10-
DropdownMenu,
11-
DropdownMenuContent,
12-
DropdownMenuItem,
13-
DropdownMenuLabel,
14-
DropdownMenuSeparator,
15-
DropdownMenuTrigger,
16-
} from "@/components/ui/dropdown-menu"
178

189
interface MainNavProps {
1910
items?: NavItem[]
@@ -37,7 +28,7 @@ export function MainNav({ items }: MainNavProps) {
3728
key={index}
3829
href={item.href}
3930
className={cn(
40-
"flex items-center text-lg font-semibold text-slate-600 hover:text-slate-900 dark:text-slate-100 sm:text-sm",
31+
"flex items-center text-lg font-semibold text-muted-foreground sm:text-sm",
4132
item.disabled && "cursor-not-allowed opacity-80"
4233
)}
4334
>
@@ -47,37 +38,6 @@ export function MainNav({ items }: MainNavProps) {
4738
)}
4839
</nav>
4940
) : null}
50-
<DropdownMenu>
51-
<DropdownMenuTrigger asChild>
52-
<Button
53-
variant="ghost"
54-
className="-ml-4 text-base hover:bg-transparent focus:ring-0 md:hidden"
55-
>
56-
<Icons.logo className="mr-2 h-4 w-4" />{" "}
57-
<span className="font-bold">Menu</span>
58-
</Button>
59-
</DropdownMenuTrigger>
60-
<DropdownMenuContent
61-
align="start"
62-
sideOffset={24}
63-
className="w-[300px] overflow-scroll"
64-
>
65-
<DropdownMenuLabel>
66-
<Link href="/" className="flex items-center">
67-
<Icons.logo className="mr-2 h-4 w-4" /> {siteConfig.name}
68-
</Link>
69-
</DropdownMenuLabel>
70-
<DropdownMenuSeparator />
71-
{items?.map(
72-
(item, index) =>
73-
item.href && (
74-
<DropdownMenuItem key={index} asChild>
75-
<Link href={item.href}>{item.title}</Link>
76-
</DropdownMenuItem>
77-
)
78-
)}
79-
</DropdownMenuContent>
80-
</DropdownMenu>
8141
</div>
8242
)
8343
}

‎components/site-header.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import Link from "next/link"
22

33
import { siteConfig } from "@/config/site"
4+
import { buttonVariants } from "@/components/ui/button"
45
import { Icons } from "@/components/icons"
56
import { MainNav } from "@/components/main-nav"
67
import { ThemeToggle } from "@/components/theme-toggle"
7-
import { buttonVariants } from "@/components/ui/button"
88

99
export function SiteHeader() {
1010
return (
11-
<header className="sticky top-0 z-40 w-full border-b border-b-slate-200 bg-white dark:border-b-slate-700 dark:bg-slate-900">
11+
<header className="sticky top-0 z-40 w-full border-b bg-background">
1212
<div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
1313
<MainNav items={siteConfig.mainNav} />
1414
<div className="flex flex-1 items-center justify-end space-x-4">
@@ -22,7 +22,6 @@ export function SiteHeader() {
2222
className={buttonVariants({
2323
size: "sm",
2424
variant: "ghost",
25-
className: "text-slate-700 dark:text-slate-400",
2625
})}
2726
>
2827
<Icons.gitHub className="h-5 w-5" />
@@ -38,7 +37,6 @@ export function SiteHeader() {
3837
className={buttonVariants({
3938
size: "sm",
4039
variant: "ghost",
41-
className: "text-slate-700 dark:text-slate-400",
4240
})}
4341
>
4442
<Icons.twitter className="h-5 w-5 fill-current" />

‎components/tailwind-indicator.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export function TailwindIndicator() {
2+
if (process.env.NODE_ENV === "production") return null
3+
4+
return (
5+
<div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
6+
<div className="block sm:hidden">xs</div>
7+
<div className="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">
8+
sm
9+
</div>
10+
<div className="hidden md:block lg:hidden xl:hidden 2xl:hidden">md</div>
11+
<div className="hidden lg:block xl:hidden 2xl:hidden">lg</div>
12+
<div className="hidden xl:block 2xl:hidden">xl</div>
13+
<div className="hidden 2xl:block">2xl</div>
14+
</div>
15+
)
16+
}

‎components/theme-provider.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import { ThemeProvider as NextThemesProvider } from "next-themes"
5+
import { ThemeProviderProps } from "next-themes/dist/types"
6+
7+
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
8+
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
9+
}

‎components/theme-toggle.tsx

Lines changed: 13 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,23 @@
1+
"use client"
2+
13
import * as React from "react"
24
import { useTheme } from "next-themes"
35

4-
import { Icons } from "@/components/icons"
56
import { Button } from "@/components/ui/button"
6-
import {
7-
DropdownMenu,
8-
DropdownMenuContent,
9-
DropdownMenuItem,
10-
DropdownMenuTrigger,
11-
} from "@/components/ui/dropdown-menu"
7+
import { Icons } from "@/components/icons"
128

139
export function ThemeToggle() {
14-
const { setTheme } = useTheme()
10+
const { setTheme, theme } = useTheme()
1511

1612
return (
17-
<DropdownMenu>
18-
<DropdownMenuTrigger asChild>
19-
<Button variant="ghost" size="sm">
20-
<Icons.sun className="rotate-0 scale-100 transition-all hover:text-slate-900 dark:-rotate-90 dark:scale-0 dark:text-slate-400 dark:hover:text-slate-100" />
21-
<Icons.moon className="absolute rotate-90 scale-0 transition-all hover:text-slate-900 dark:rotate-0 dark:scale-100 dark:text-slate-400 dark:hover:text-slate-100" />
22-
<span className="sr-only">Toggle theme</span>
23-
</Button>
24-
</DropdownMenuTrigger>
25-
<DropdownMenuContent align="end" forceMount>
26-
<DropdownMenuItem onClick={() => setTheme("light")}>
27-
<Icons.sun className="mr-2 h-4 w-4" />
28-
<span>Light</span>
29-
</DropdownMenuItem>
30-
<DropdownMenuItem onClick={() => setTheme("dark")}>
31-
<Icons.moon className="mr-2 h-4 w-4" />
32-
<span>Dark</span>
33-
</DropdownMenuItem>
34-
<DropdownMenuItem onClick={() => setTheme("system")}>
35-
<Icons.laptop className="mr-2 h-4 w-4" />
36-
<span>System</span>
37-
</DropdownMenuItem>
38-
</DropdownMenuContent>
39-
</DropdownMenu>
13+
<Button
14+
variant="ghost"
15+
size="sm"
16+
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
17+
>
18+
<Icons.sun className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
19+
<Icons.moon className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
20+
<span className="sr-only">Toggle theme</span>
21+
</Button>
4022
)
4123
}

0 commit comments

Comments
 (0)