7 |
16 | )
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/Providers.tsx:
--------------------------------------------------------------------------------
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 | import { TooltipProvider } from '@/registry/new-york/ui/Tooltip'
8 |
9 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
10 | return (
11 |
8 |
13 | Profile
9 |10 | This is how others will see you on the site. 11 |
12 |
11 |
12 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env*.local
29 |
30 | # vercel
31 | .vercel
32 |
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 |
--------------------------------------------------------------------------------
/src/app/forms/display/page.tsx:
--------------------------------------------------------------------------------
1 | import { Separator } from '@/registry/new-york/ui/Separator'
2 | import { DisplayForm } from '@/app/forms/display/DisplayForm'
3 |
4 | export default function SettingsDisplayPage() {
5 | return (
6 |
7 |
16 | )
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/forms/account/page.tsx:
--------------------------------------------------------------------------------
1 | import { Separator } from '@/registry/new-york/ui/Separator'
2 | import { AccountForm } from '@/app/forms/account/AccountForm'
3 |
4 | export default function SettingsAccountPage() {
5 | return (
6 |
8 |
13 | Display
9 |10 | Turn items on or off to control what's displayed in the app. 11 |
12 |
7 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/src/app/forms/notifications/page.tsx:
--------------------------------------------------------------------------------
1 | import { Separator } from '@/registry/new-york/ui/Separator'
2 | import { NotificationsForm } from '@/app/forms/notifications/NotificationsForm'
3 |
4 | export default function SettingsNotificationsPage() {
5 | return (
6 |
8 |
14 | Account
9 |10 | Update your account settings. Set your preferred language and 11 | timezone. 12 |
13 |
7 |
16 | )
17 | }
18 |
--------------------------------------------------------------------------------
/src/hooks/use-mutation-observer.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | export const useMutationObserver = (
4 | ref: React.MutableRefObject
8 |
13 | Notifications
9 |10 | Configure how you receive notifications. 11 |
12 |
7 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/src/app/cards/components/DatePicker.tsx:
--------------------------------------------------------------------------------
1 | import DatePickerWithRange from '@/registry/default/example/DatePickerWithRange'
2 | import { Card, CardContent } from '@/registry/new-york/ui/Card'
3 | import { Label } from '@/registry/new-york/ui/Label'
4 |
5 | export function DemoDatePicker() {
6 | return (
7 |
8 |
14 | Appearance
9 |10 | Customize the appearance of the app. Automatically switch between day 11 | and night themes. 12 |
13 |
10 |
13 |
15 |
6 |
13 | )
14 | }
15 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "noEmit": true,
9 | "esModuleInterop": true,
10 | "module": "esnext",
11 | "moduleResolution": "bundler",
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "jsx": "preserve",
15 | "incremental": true,
16 | "plugins": [
17 | {
18 | "name": "next"
19 | }
20 | ],
21 | "paths": {
22 | "@/*": ["./src/*"]
23 | }
24 | },
25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 | "exclude": ["node_modules"]
27 | }
28 |
--------------------------------------------------------------------------------
/src/app/tasks/data/seed.ts:
--------------------------------------------------------------------------------
1 | import fs from 'fs'
2 | import path from 'path'
3 | import { faker } from '@faker-js/faker'
4 |
5 | import { labels, priorities, statuses } from './Data'
6 |
7 | const tasks = Array.from({ length: 100 }, () => ({
8 | id: `TASK-${faker.datatype.number({ min: 1000, max: 9999 })}`,
9 | title: faker.hacker.phrase().replace(/^./, (letter) => letter.toUpperCase()),
10 | status: faker.helpers.arrayElement(statuses).value,
11 | label: faker.helpers.arrayElement(labels).value,
12 | priority: faker.helpers.arrayElement(priorities).value,
13 | }))
14 |
15 | fs.writeFileSync(
16 | path.join(__dirname, 'tasks.json'),
17 | JSON.stringify(tasks, null, 2)
18 | )
19 |
20 | console.log('✅ Tasks data generated.')
21 |
--------------------------------------------------------------------------------
/src/components/ThemeSwitcher.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as React from 'react'
4 | import { useSelectedLayoutSegment } from 'next/navigation'
5 |
6 | import { useConfig } from '@/hooks/use-config'
7 |
8 | export function ThemeSwitcher() {
9 | const [config] = useConfig()
10 | const segment = useSelectedLayoutSegment()
11 |
12 | React.useEffect(() => {
13 | document.body.classList.forEach((className) => {
14 | if (className.match(/^theme.*/)) {
15 | document.body.classList.remove(className)
16 | }
17 | })
18 |
19 | const theme = segment === 'themes' ? config.theme : null
20 | if (theme) {
21 | return document.body.classList.add(`theme-${theme}`)
22 | }
23 | }, [segment, config])
24 |
25 | return null
26 | }
27 |
--------------------------------------------------------------------------------
/src/registry/new-york/ui/TextArea.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import { cn } from '@/lib/utils'
4 |
5 | export interface TextareaProps
6 | extends React.TextareaHTMLAttributesxs
7 | sm
8 | md
9 | lg
10 | xl
11 | 2xl
12 |
22 | {title && {title} }
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |
22 | {title && {title} }
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |
3 | 
4 |
6 | In this web app you can explore different themes for the shadcn/ui library. Look how this themes would look in your project and start using theme easily. 7 | 8 | ### How to use 9 | 1. Configure shadcn/ui on your project.
10 | 2. Select a theme and click the copy button.
11 | 3. Replace the :root and dark selectors of your globals.css with the values you copied. 12 | 13 | ### Examples 14 | 15 |  16 |
17 |  18 |
19 |  20 |
21 |  22 |
23 |  24 |
25 |  26 | 27 | -------------------------------------------------------------------------------- /src/app/tasks/data/Data.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | ArrowDownIcon, 3 | ArrowRightIcon, 4 | ArrowUpIcon, 5 | CheckCircledIcon, 6 | CircleIcon, 7 | CrossCircledIcon, 8 | QuestionMarkCircledIcon, 9 | StopwatchIcon, 10 | } from '@radix-ui/react-icons' 11 | 12 | export const labels = [ 13 | { 14 | value: 'bug', 15 | label: 'Bug', 16 | }, 17 | { 18 | value: 'feature', 19 | label: 'Feature', 20 | }, 21 | { 22 | value: 'documentation', 23 | label: 'Documentation', 24 | }, 25 | ] 26 | 27 | export const statuses = [ 28 | { 29 | value: 'backlog', 30 | label: 'Backlog', 31 | icon: QuestionMarkCircledIcon, 32 | }, 33 | { 34 | value: 'todo', 35 | label: 'Todo', 36 | icon: CircleIcon, 37 | }, 38 | { 39 | value: 'in progress', 40 | label: 'In Progress', 41 | icon: StopwatchIcon, 42 | }, 43 | { 44 | value: 'done', 45 | label: 'Done', 46 | icon: CheckCircledIcon, 47 | }, 48 | { 49 | value: 'canceled', 50 | label: 'Canceled', 51 | icon: CrossCircledIcon, 52 | }, 53 | ] 54 | 55 | export const priorities = [ 56 | { 57 | label: 'Low', 58 | value: 'low', 59 | icon: ArrowDownIcon, 60 | }, 61 | { 62 | label: 'Medium', 63 | value: 'medium', 64 | icon: ArrowRightIcon, 65 | }, 66 | { 67 | label: 'High', 68 | value: 'high', 69 | icon: ArrowUpIcon, 70 | }, 71 | ] 72 | -------------------------------------------------------------------------------- /src/registry/new-york/ui/HoverCard.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import * as React from 'react' 4 | import * as HoverCardPrimitive from '@radix-ui/react-hover-card' 5 | 6 | import { cn } from '@/lib/utils' 7 | 8 | const HoverCard = HoverCardPrimitive.Root 9 | 10 | const HoverCardTrigger = HoverCardPrimitive.Trigger 11 | 12 | const HoverCardContent = React.forwardRef< 13 | React.ElementRef
17 |
32 |
33 |
41 |
42 | );
43 | }
44 |
--------------------------------------------------------------------------------
/src/components/ModeToggle.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as React from 'react'
4 | import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
5 | import { useTheme } from 'next-themes'
6 |
7 | import { Button } from '@/registry/new-york/ui/Button'
8 | import {
9 | DropdownMenu,
10 | DropdownMenuContent,
11 | DropdownMenuItem,
12 | DropdownMenuTrigger,
13 | } from '@/registry/new-york/ui/DropdownMenu'
14 |
15 | export function ModeToggle() {
16 | const { setTheme } = useTheme()
17 |
18 | return (
19 |
20 |
26 | Share preset
21 |22 | Anyone who has this link and an OpenAI account will be able to view 23 | this. 24 |
25 |
27 |
43 |
28 |
31 |
37 |
38 |
42 | 36 | 2. Select a theme and click the copy button.
37 | 3. Replace the :root and dark selectors of your globals.css with the 38 | values you copied. 39 |
23 |
24 |
25 |
43 |
48 | Control diversity via nucleus sampling: 0.5 means half of all
49 | likelihood-weighted options are considered.
50 |
51 |
52 |
53 | )
54 | }
55 |
--------------------------------------------------------------------------------
/src/app/tasks/components/DataTableViewOptions.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu'
4 | import { MixerHorizontalIcon } from '@radix-ui/react-icons'
5 | import { Table } from '@tanstack/react-table'
6 |
7 | import { Button } from '@/registry/new-york/ui/Button'
8 | import {
9 | DropdownMenu,
10 | DropdownMenuCheckboxItem,
11 | DropdownMenuContent,
12 | DropdownMenuLabel,
13 | DropdownMenuSeparator,
14 | } from '@/registry/new-york/ui/DropdownMenu'
15 |
16 | interface DataTableViewOptionsProps
26 |
42 |
27 |
28 |
29 | {value}
30 |
31 |
32 |
23 |
24 |
25 |
43 |
48 | The maximum number of tokens to generate. Requests can use up to 2,048
49 | or 4,000 tokens, shared between prompt and completion. The exact limit
50 | varies by model.
51 |
52 |
53 |
54 | )
55 | }
56 |
--------------------------------------------------------------------------------
/src/app/dashboard/components/Overview.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'
4 |
5 | const data = [
6 | {
7 | name: 'Jan',
8 | total: Math.floor(Math.random() * 5000) + 1000,
9 | },
10 | {
11 | name: 'Feb',
12 | total: Math.floor(Math.random() * 5000) + 1000,
13 | },
14 | {
15 | name: 'Mar',
16 | total: Math.floor(Math.random() * 5000) + 1000,
17 | },
18 | {
19 | name: 'Apr',
20 | total: Math.floor(Math.random() * 5000) + 1000,
21 | },
22 | {
23 | name: 'May',
24 | total: Math.floor(Math.random() * 5000) + 1000,
25 | },
26 | {
27 | name: 'Jun',
28 | total: Math.floor(Math.random() * 5000) + 1000,
29 | },
30 | {
31 | name: 'Jul',
32 | total: Math.floor(Math.random() * 5000) + 1000,
33 | },
34 | {
35 | name: 'Aug',
36 | total: Math.floor(Math.random() * 5000) + 1000,
37 | },
38 | {
39 | name: 'Sep',
40 | total: Math.floor(Math.random() * 5000) + 1000,
41 | },
42 | {
43 | name: 'Oct',
44 | total: Math.floor(Math.random() * 5000) + 1000,
45 | },
46 | {
47 | name: 'Nov',
48 | total: Math.floor(Math.random() * 5000) + 1000,
49 | },
50 | {
51 | name: 'Dec',
52 | total: Math.floor(Math.random() * 5000) + 1000,
53 | },
54 | ]
55 |
56 | export function Overview() {
57 | return (
58 |
26 |
42 |
27 |
28 |
29 | {value}
30 |
31 |
32 |
25 |
26 |
27 |
45 |
50 | Controls randomness: lowering results in less random completions. As
51 | the temperature approaches zero, the model will become deterministic
52 | and repetitive.
53 |
54 |
55 |
56 | )
57 | }
58 |
--------------------------------------------------------------------------------
/src/app/dashboard/components/DateRangePicker.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as React from 'react'
4 | import { CalendarIcon } from '@radix-ui/react-icons'
5 | import { addDays, format } from 'date-fns'
6 | import { DateRange } from 'react-day-picker'
7 |
8 | import { cn } from '@/lib/utils'
9 | import { Button } from '@/registry/new-york/ui/Button'
10 | import { Calendar } from '@/registry/new-york/ui/Calendar'
11 | import {
12 | Popover,
13 | PopoverContent,
14 | PopoverTrigger,
15 | } from '@/registry/new-york/ui/Popover'
16 |
17 | export function CalendarDateRangePicker({
18 | className,
19 | }: React.HTMLAttributes
28 |
44 |
29 |
30 |
31 | {value}
32 |
33 |
34 |
27 |
28 |
29 |
51 |
52 |
53 |
62 |
63 |
64 | )
65 | }
66 |
--------------------------------------------------------------------------------
/src/registry/default/example/DatePickerWithRange.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as React from 'react'
4 | import { addDays, format } from 'date-fns'
5 | import { Calendar as CalendarIcon } from 'lucide-react'
6 | import { DateRange } from 'react-day-picker'
7 |
8 | import { cn } from '@/lib/utils'
9 | import { Button } from '@/registry/default/ui/Button'
10 | import { Calendar } from '@/registry/default/ui/Calendar'
11 | import {
12 | Popover,
13 | PopoverContent,
14 | PopoverTrigger,
15 | } from '@/registry/default/ui/Popover'
16 |
17 | export default function DatePickerWithRange({
18 | className,
19 | }: React.HTMLAttributes
27 |
28 |
29 |
51 |
52 |
53 |
62 |
63 |
64 | )
65 | }
66 |
--------------------------------------------------------------------------------
/src/app/tasks/page.tsx:
--------------------------------------------------------------------------------
1 | import { promises as fs } from 'fs'
2 | import path from 'path'
3 | import { Metadata } from 'next'
4 | import Image from 'next/image'
5 | import { z } from 'zod'
6 |
7 | import { columns } from './components/Columns'
8 | import { DataTable } from './components/DataTable'
9 | import { UserNav } from './components/UserNav'
10 | import { taskSchema } from './data/schema'
11 |
12 | export const metadata: Metadata = {
13 | title: 'Tasks',
14 | description: 'A task and issue tracker build using Tanstack Table.',
15 | }
16 |
17 | // Simulate a database read for tasks.
18 | async function getTasks() {
19 | const data = await fs.readFile(
20 | path.join(process.cwd(), 'src/app/tasks/data/tasks.json')
21 | )
22 |
23 | const tasks = JSON.parse(data.toString())
24 |
25 | return z.array(taskSchema).parse(tasks)
26 | }
27 |
28 | export default async function TaskPage() {
29 | const tasks = await getTasks()
30 |
31 | return (
32 | <>
33 |
34 |
49 |
50 |
63 |
64 | )
65 | }
66 |
--------------------------------------------------------------------------------
/src/app/cards/components/Notifications.tsx:
--------------------------------------------------------------------------------
1 | import { BellIcon, EyeNoneIcon, PersonIcon } from '@radix-ui/react-icons'
2 |
3 | import {
4 | Card,
5 | CardContent,
6 | CardDescription,
7 | CardHeader,
8 | CardTitle,
9 | } from '@/registry/new-york/ui/Card'
10 |
11 | export function DemoNotifications() {
12 | return (
13 |
51 |
61 |
52 |
57 | Welcome back!
53 |54 | Here's a list of your tasks for this month! 55 |
56 |
58 |
60 |
22 |
30 |
24 |
29 | Everything
25 |26 | Email digest, mentions & all activity. 27 |
28 |
31 |
39 |
33 |
38 | Available
34 |35 | Only mentions and comments. 36 |
37 |
40 |
48 |
42 |
47 | Ignoring
43 |44 | Turn off all notifications. 45 |
46 |
24 |
60 | )
61 | }
62 |
--------------------------------------------------------------------------------
/src/registry/default/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 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
25 |
29 | table.getColumn('title')?.setFilterValue(event.target.value)
30 | }
31 | className='h-8 w-[150px] lg:w-[250px]'
32 | />
33 | {table.getColumn('status') && (
34 |
58 |
27 |
31 |
35 |
36 |
37 |
46 |
38 |
39 |
40 |
41 |
42 | Or continue with
43 |
44 |
45 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
20 |
46 |
48 | );
49 | };
50 |
51 | export default ThemeSelector;
52 |
--------------------------------------------------------------------------------
/src/registry/new-york/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 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
9 | {
10 | variants: {
11 | variant: {
12 | default:
13 | 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
14 | destructive:
15 | 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
16 | outline:
17 | 'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
18 | secondary:
19 | 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
20 | ghost: 'hover:bg-accent hover:text-accent-foreground',
21 | link: 'text-primary underline-offset-4 hover:underline',
22 | },
23 | size: {
24 | default: 'h-9 px-4 py-2',
25 | sm: 'h-8 rounded-md px-3 text-xs',
26 | lg: 'h-10 rounded-md px-8',
27 | icon: 'h-9 w-9',
28 | },
29 | },
30 | defaultVariants: {
31 | variant: 'default',
32 | size: 'default',
33 | },
34 | }
35 | )
36 |
37 | export interface ButtonProps
38 | extends React.ButtonHTMLAttributes
39 |
41 | )}
42 |
37 |
52 |
53 |
67 |
68 | );
69 | }
70 |
--------------------------------------------------------------------------------
/src/app/music/data/albums.ts:
--------------------------------------------------------------------------------
1 | export interface Album {
2 | name: string
3 | artist: string
4 | cover: string
5 | }
6 |
7 | export const listenNowAlbums: Album[] = [
8 | {
9 | name: 'React Rendezvous',
10 | artist: 'Ethan Byte',
11 | cover:
12 | 'https://images.unsplash.com/photo-1611348586804-61bf6c080437?w=300&dpr=2&q=80',
13 | },
14 | {
15 | name: 'Async Awakenings',
16 | artist: 'Nina Netcode',
17 | cover:
18 | 'https://images.unsplash.com/photo-1468817814611-b7edf94b5d60?w=300&dpr=2&q=80',
19 | },
20 | {
21 | name: 'The Art of Reusability',
22 | artist: 'Lena Logic',
23 | cover:
24 | 'https://images.unsplash.com/photo-1528143358888-6d3c7f67bd5d?w=300&dpr=2&q=80',
25 | },
26 | {
27 | name: 'Stateful Symphony',
28 | artist: 'Beth Binary',
29 | cover:
30 | 'https://images.unsplash.com/photo-1490300472339-79e4adc6be4a?w=300&dpr=2&q=80',
31 | },
32 | ]
33 |
34 | export const madeForYouAlbums: Album[] = [
35 | {
36 | name: 'Thinking Components',
37 | artist: 'Lena Logic',
38 | cover:
39 | 'https://images.unsplash.com/photo-1615247001958-f4bc92fa6a4a?w=300&dpr=2&q=80',
40 | },
41 | {
42 | name: 'Functional Fury',
43 | artist: 'Beth Binary',
44 | cover:
45 | 'https://images.unsplash.com/photo-1513745405825-efaf9a49315f?w=300&dpr=2&q=80',
46 | },
47 | {
48 | name: 'React Rendezvous',
49 | artist: 'Ethan Byte',
50 | cover:
51 | 'https://images.unsplash.com/photo-1614113489855-66422ad300a4?w=300&dpr=2&q=80',
52 | },
53 | {
54 | name: 'Stateful Symphony',
55 | artist: 'Beth Binary',
56 | cover:
57 | 'https://images.unsplash.com/photo-1446185250204-f94591f7d702?w=300&dpr=2&q=80',
58 | },
59 | {
60 | name: 'Async Awakenings',
61 | artist: 'Nina Netcode',
62 | cover:
63 | 'https://images.unsplash.com/photo-1468817814611-b7edf94b5d60?w=300&dpr=2&q=80',
64 | },
65 | {
66 | name: 'The Art of Reusability',
67 | artist: 'Lena Logic',
68 | cover:
69 | 'https://images.unsplash.com/photo-1490300472339-79e4adc6be4a?w=300&dpr=2&q=80',
70 | },
71 | ]
72 |
--------------------------------------------------------------------------------
/src/app/tasks/components/UserNav.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Avatar,
3 | AvatarFallback,
4 | AvatarImage,
5 | } from '@/registry/new-york/ui/Avatar'
6 | import { Button } from '@/registry/new-york/ui/Button'
7 | import {
8 | DropdownMenu,
9 | DropdownMenuContent,
10 | DropdownMenuGroup,
11 | DropdownMenuItem,
12 | DropdownMenuLabel,
13 | DropdownMenuSeparator,
14 | DropdownMenuShortcut,
15 | DropdownMenuTrigger,
16 | } from '@/registry/new-york/ui/DropdownMenu'
17 |
18 | export function UserNav() {
19 | return (
20 |
54 |
59 | Settings
55 |56 | Manage your account settings and set e-mail preferences. 57 |
58 |
61 |
64 |
66 | {children}
65 |
32 |
37 | shadcn
33 |34 | m@example.com 35 |
36 |
32 |
37 | shadcn
33 |34 | m@example.com 35 |
36 |
15 |
57 |
17 |
55 |
56 |
24 |
31 |
33 |
34 |
41 |
43 |
44 |
50 |
52 |
27 |
51 |
70 | )
71 | }
72 |
--------------------------------------------------------------------------------
/src/app/music/components/PodcastEmptyPlaceholder.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from '@/registry/new-york/ui/Button'
2 | import {
3 | Dialog,
4 | DialogContent,
5 | DialogDescription,
6 | DialogFooter,
7 | DialogHeader,
8 | DialogTitle,
9 | DialogTrigger,
10 | } from '@/registry/new-york/ui/Dialog'
11 | import { Input } from '@/registry/new-york/ui/Input'
12 | import { Label } from '@/registry/new-york/ui/Label'
13 |
14 | export function PodcastEmptyPlaceholder() {
15 | return (
16 |
52 |
61 |
69 |
53 |
54 |
55 |
56 |
57 | Or continue with
58 |
59 |
60 |
17 |
63 | )
64 | }
65 |
--------------------------------------------------------------------------------
/src/styles/themes/crimson.css:
--------------------------------------------------------------------------------
1 | .crimson.light {
2 | --background: 0 0% 98%;
3 | --foreground: 0 30% 10%;
4 | --card: 0 0% 98%;
5 | --card-foreground: 0 30% 10%;
6 | --popover: 0 0% 98%;
7 | --popover-foreground: 0 30% 10%;
8 | --primary: 0 70% 30%;
9 | --primary-foreground: 0 0% 98%;
10 | --secondary: 0 80% 95%;
11 | --secondary-foreground: 0 30% 10%;
12 | --muted: 0 80% 95%;
13 | --muted-foreground: 0 50% 40%;
14 | --accent: 0 80% 95%;
15 | --accent-foreground: 0 30% 10%;
16 | --destructive: 0 70% 50%;
17 | --destructive-foreground: 0 0% 98%;
18 | --border: 0 80% 90%;
19 | --input: 0 80% 90%;
20 | --ring: 0 70% 60%;
21 | --radius: 0.5rem;
22 |
23 | --chart-1: 0 60% 50%;
24 | --chart-2: 0 50% 45%;
25 | --chart-3: 0 40% 40%;
26 | --chart-4: 0 70% 60%;
27 | --chart-5: 0 80% 55%;
28 |
29 | --sidebar-background: 0 0% 98%;
30 | --sidebar-foreground: 0 30% 10%;
31 | --sidebar-primary: 0 70% 30%;
32 | --sidebar-primary-foreground: 0 0% 98%;
33 | --sidebar-accent: 0 80% 95%;
34 | --sidebar-accent-foreground: 0 30% 10%;
35 | --sidebar-border: 0 80% 90%;
36 | --sidebar-ring: 0 70% 60%;
37 | }
38 |
39 | .crimson.dark {
40 | --background: 0 10% 10%;
41 | --foreground: 0 100% 95%;
42 | --card: 0 10% 10%;
43 | --card-foreground: 0 100% 95%;
44 | --popover: 0 10% 10%;
45 | --popover-foreground: 0 100% 95%;
46 | --primary: 0 100% 95%;
47 | --primary-foreground: 0 70% 30%;
48 | --secondary: 0 20% 20%;
49 | --secondary-foreground: 0 100% 95%;
50 | --muted: 0 20% 20%;
51 | --muted-foreground: 0 70% 50%;
52 | --accent: 0 20% 20%;
53 | --accent-foreground: 0 100% 95%;
54 | --destructive: 0 70% 30%;
55 | --destructive-foreground: 0 90% 95%;
56 | --border: 0 20% 20%;
57 | --input: 0 20% 20%;
58 | --ring: 0 50% 80%;
59 |
60 | --chart-1: 0 60% 50%;
61 | --chart-2: 0 50% 45%;
62 | --chart-3: 0 40% 40%;
63 | --chart-4: 0 70% 60%;
64 | --chart-5: 0 80% 55%;
65 |
66 | --sidebar-background: 0 10% 10%;
67 | --sidebar-foreground: 0 80% 90%;
68 | --sidebar-primary: 0 70% 40%;
69 | --sidebar-primary-foreground: 0 0% 100%;
70 | --sidebar-accent: 0 20% 20%;
71 | --sidebar-accent-foreground: 0 80% 90%;
72 | --sidebar-border: 0 20% 20%;
73 | --sidebar-ring: 0 50% 80%;
74 | }
--------------------------------------------------------------------------------
/src/styles/themes/sunset.css:
--------------------------------------------------------------------------------
1 | .sunset.light {
2 | --background: 0 0% 98%;
3 | --foreground: 30 60% 15%;
4 | --card: 0 0% 98%;
5 | --card-foreground: 30 60% 15%;
6 | --popover: 0 0% 98%;
7 | --popover-foreground: 30 60% 15%;
8 | --primary: 30 90% 30%;
9 | --primary-foreground: 0 0% 98%;
10 | --secondary: 30 90% 95%;
11 | --secondary-foreground: 30 60% 15%;
12 | --muted: 30 90% 95%;
13 | --muted-foreground: 30 70% 40%;
14 | --accent: 30 90% 95%;
15 | --accent-foreground: 30 60% 15%;
16 | --destructive: 0 60% 50%;
17 | --destructive-foreground: 0 0% 98%;
18 | --border: 30 80% 90%;
19 | --input: 30 80% 90%;
20 | --ring: 30 70% 60%;
21 | --radius: 0.5rem;
22 |
23 | --chart-1: 10 80% 50%;
24 | --chart-2: 30 70% 45%;
25 | --chart-3: 50 80% 55%;
26 | --chart-4: 10 60% 60%;
27 | --chart-5: 30 50% 67%;
28 |
29 | --sidebar-background: 0 0% 98%;
30 | --sidebar-foreground: 30 60% 15%;
31 | --sidebar-primary: 30 90% 30%;
32 | --sidebar-primary-foreground: 0 0% 98%;
33 | --sidebar-accent: 30 90% 95%;
34 | --sidebar-accent-foreground: 30 60% 15%;
35 | --sidebar-border: 30 80% 90%;
36 | --sidebar-ring: 30 70% 60%;
37 | }
38 |
39 | .sunset.dark {
40 | --background: 30 10% 10%;
41 | --foreground: 0 0% 98%;
42 | --card: 30 10% 10%;
43 | --card-foreground: 0 0% 98%;
44 | --popover: 30 10% 10%;
45 | --popover-foreground: 0 0% 98%;
46 | --primary: 0 0% 98%;
47 | --primary-foreground: 30 90% 30%;
48 | --secondary: 30 20% 25%;
49 | --secondary-foreground: 0 0% 98%;
50 | --muted: 30 20% 25%;
51 | --muted-foreground: 30 60% 50%;
52 | --accent: 30 20% 25%;
53 | --accent-foreground: 0 0% 98%;
54 | --destructive: 0 60% 30%;
55 | --destructive-foreground: 0 90% 95%;
56 | --border: 30 20% 25%;
57 | --input: 30 20% 25%;
58 | --ring: 30 50% 80%;
59 |
60 | --chart-1: 0 60% 50%;
61 | --chart-2: 30 50% 45%;
62 | --chart-3: 50 60% 55%;
63 | --chart-4: 10 50% 60%;
64 | --chart-5: 30 50% 55%;
65 |
66 | --sidebar-background: 30 10% 10%;
67 | --sidebar-foreground: 30 90% 95%;
68 | --sidebar-primary: 30 80% 40%;
69 | --sidebar-primary-foreground: 0 0% 100%;
70 | --sidebar-accent: 30 20% 25%;
71 | --sidebar-accent-foreground: 30 90% 95%;
72 | --sidebar-border: 30 20% 25%;
73 | --sidebar-ring: 30 50% 80%;
74 | }
--------------------------------------------------------------------------------
/src/styles/themes/sunrise.css:
--------------------------------------------------------------------------------
1 | .sunrise.light {
2 | --background: 0 0% 98%;
3 | --foreground: 30 50% 20%;
4 | --card: 0 0% 98%;
5 | --card-foreground: 30 50% 20%;
6 | --popover: 0 0% 98%;
7 | --popover-foreground: 30 50% 20%;
8 | --primary: 30 80% 60%;
9 | --primary-foreground: 0 0% 100%;
10 | --secondary: 30 70% 50%;
11 | --secondary-foreground: 30 10% 10%;
12 | --muted: 30 90% 90%;
13 | --muted-foreground: 30 50% 20%;
14 | --accent: 30 80% 70%;
15 | --accent-foreground: 0 0% 100%;
16 | --destructive: 0 60% 50%;
17 | --destructive-foreground: 0 0% 100%;
18 | --border: 30 30% 85%;
19 | --input: 30 30% 85%;
20 | --ring: 30 30% 85%;
21 | --radius: 0.5rem;
22 |
23 | --chart-1: 30 60% 50%;
24 | --chart-2: 30 50% 45%;
25 | --chart-3: 30 40% 40%;
26 | --chart-4: 30 70% 60%;
27 | --chart-5: 30 80% 55%;
28 |
29 | --sidebar-background: 0 0% 98%;
30 | --sidebar-foreground: 30 50% 20%;
31 | --sidebar-primary: 30 80% 60%;
32 | --sidebar-primary-foreground: 0 0% 100%;
33 | --sidebar-accent: 30 70% 50%;
34 | --sidebar-accent-foreground: 30 10% 10%;
35 | --sidebar-border: 30 30% 85%;
36 | --sidebar-ring: 30 30% 85%;
37 | }
38 |
39 | .sunrise.dark {
40 | --background: 30 10% 10%;
41 | --foreground: 0 0% 98%;
42 | --card: 30 10% 10%;
43 | --card-foreground: 0 0% 98%;
44 | --popover: 30 10% 10%;
45 | --popover-foreground: 0 0% 98%;
46 | --primary: 30 80% 60%;
47 | --primary-foreground: 0 0% 100%;
48 | --secondary: 30 20% 20%;
49 | --secondary-foreground: 0 0% 98%;
50 | --muted: 30 20% 20%;
51 | --muted-foreground: 30 90% 70%;
52 | --accent: 30 20% 20%;
53 | --accent-foreground: 0 0% 98%;
54 | --destructive: 0 60% 50%;
55 | --destructive-foreground: 210 60% 95%;
56 | --border: 30 20% 20%;
57 | --input: 30 20% 20%;
58 | --ring: 30 50% 80%;
59 |
60 | --chart-1: 30 60% 50%;
61 | --chart-2: 30 50% 45%;
62 | --chart-3: 30 40% 40%;
63 | --chart-4: 30 70% 60%;
64 | --chart-5: 30 80% 55%;
65 |
66 | --sidebar-background: 30 10% 10%;
67 | --sidebar-foreground: 30 90% 90%;
68 | --sidebar-primary: 30 80% 60%;
69 | --sidebar-primary-foreground: 0 0% 100%;
70 | --sidebar-accent: 30 20% 20%;
71 | --sidebar-accent-foreground: 30 90% 90%;
72 | --sidebar-border: 30 20% 20%;
73 | --sidebar-ring: 30 50% 80%;
74 | }
--------------------------------------------------------------------------------
/src/styles/themes/forest.css:
--------------------------------------------------------------------------------
1 | .forest.light {
2 | --background: 0 0% 98%;
3 | --foreground: 120 30% 15%;
4 | --card: 0 0% 98%;
5 | --card-foreground: 120 30% 15%;
6 | --popover: 0 0% 98%;
7 | --popover-foreground: 120 30% 15%;
8 | --primary: 120 60% 30%;
9 | --primary-foreground: 0 0% 98%;
10 | --secondary: 120 70% 95%;
11 | --secondary-foreground: 120 30% 15%;
12 | --muted: 120 70% 95%;
13 | --muted-foreground: 120 50% 40%;
14 | --accent: 120 70% 95%;
15 | --accent-foreground: 120 30% 15%;
16 | --destructive: 0 70% 50%;
17 | --destructive-foreground: 0 0% 98%;
18 | --border: 120 80% 90%;
19 | --input: 120 80% 90%;
20 | --ring: 120 70% 60%;
21 | --radius: 0.5rem;
22 |
23 | --chart-1: 120 60% 50%;
24 | --chart-2: 120 50% 45%;
25 | --chart-3: 120 40% 40%;
26 | --chart-4: 120 70% 60%;
27 | --chart-5: 120 80% 55%;
28 |
29 | --sidebar-background: 0 0% 98%;
30 | --sidebar-foreground: 120 30% 15%;
31 | --sidebar-primary: 120 60% 30%;
32 | --sidebar-primary-foreground: 0 0% 98%;
33 | --sidebar-accent: 120 70% 95%;
34 | --sidebar-accent-foreground: 120 30% 15%;
35 | --sidebar-border: 120 80% 90%;
36 | --sidebar-ring: 120 70% 60%;
37 | }
38 |
39 | .forest.dark {
40 | --background: 120 10% 10%;
41 | --foreground: 0 0% 98%;
42 | --card: 120 10% 10%;
43 | --card-foreground: 0 0% 98%;
44 | --popover: 120 10% 10%;
45 | --popover-foreground: 0 0% 98%;
46 | --primary: 0 0% 98%;
47 | --primary-foreground: 120 60% 30%;
48 | --secondary: 120 20% 20%;
49 | --secondary-foreground: 0 0% 98%;
50 | --muted: 120 20% 20%;
51 | --muted-foreground: 120 70% 50%;
52 | --accent: 120 20% 20%;
53 | --accent-foreground: 0 0% 98%;
54 | --destructive: 0 70% 30%;
55 | --destructive-foreground: 0 90% 95%;
56 | --border: 120 20% 20%;
57 | --input: 120 20% 20%;
58 | --ring: 120 50% 80%;
59 |
60 | --chart-1: 120 60% 50%;
61 | --chart-2: 120 50% 45%;
62 | --chart-3: 120 40% 40%;
63 | --chart-4: 120 70% 60%;
64 | --chart-5: 120 80% 55%;
65 |
66 | --sidebar-background: 120 10% 10%;
67 | --sidebar-foreground: 120 70% 95%;
68 | --sidebar-primary: 120 60% 40%;
69 | --sidebar-primary-foreground: 0 0% 100%;
70 | --sidebar-accent: 120 20% 20%;
71 | --sidebar-accent-foreground: 120 70% 95%;
72 | --sidebar-border: 120 20% 20%;
73 | --sidebar-ring: 120 50% 80%;
74 | }
--------------------------------------------------------------------------------
/src/styles/themes/royal.css:
--------------------------------------------------------------------------------
1 | .royal.light {
2 | --background: 0 0% 98%;
3 | --foreground: 240 30% 20%;
4 | --card: 0 0% 98%;
5 | --card-foreground: 240 30% 20%;
6 | --popover: 0 0% 98%;
7 | --popover-foreground: 240 30% 20%;
8 | --primary: 240 70% 60%;
9 | --primary-foreground: 0 0% 100%;
10 | --secondary: 240 50% 50%;
11 | --secondary-foreground: 240 10% 10%;
12 | --muted: 240 90% 90%;
13 | --muted-foreground: 240 30% 20%;
14 | --accent: 240 60% 50%;
15 | --accent-foreground: 0 0% 100%;
16 | --destructive: 0 60% 50%;
17 | --destructive-foreground: 0 0% 100%;
18 | --border: 240 30% 85%;
19 | --input: 240 30% 85%;
20 | --ring: 240 30% 85%;
21 | --radius: 0.5rem;
22 |
23 | --chart-1: 240 60% 50%;
24 | --chart-2: 240 50% 45%;
25 | --chart-3: 240 40% 40%;
26 | --chart-4: 240 70% 60%;
27 | --chart-5: 240 80% 55%;
28 |
29 | --sidebar-background: 0 0% 98%;
30 | --sidebar-foreground: 240 30% 20%;
31 | --sidebar-primary: 240 70% 60%;
32 | --sidebar-primary-foreground: 0 0% 100%;
33 | --sidebar-accent: 240 50% 50%;
34 | --sidebar-accent-foreground: 240 10% 10%;
35 | --sidebar-border: 240 30% 85%;
36 | --sidebar-ring: 240 30% 85%;
37 | }
38 |
39 | .royal.dark {
40 | --background: 240 10% 10%;
41 | --foreground: 0 0% 98%;
42 | --card: 240 10% 10%;
43 | --card-foreground: 0 0% 98%;
44 | --popover: 240 10% 10%;
45 | --popover-foreground: 0 0% 98%;
46 | --primary: 240 70% 60%;
47 | --primary-foreground: 0 0% 100%;
48 | --secondary: 240 30% 30%;
49 | --secondary-foreground: 0 0% 98%;
50 | --muted: 240 30% 40%;
51 | --muted-foreground: 240 70% 80%;
52 | --accent: 240 30% 30%;
53 | --accent-foreground: 0 0% 98%;
54 | --destructive: 0 60% 50%;
55 | --destructive-foreground: 210 60% 95%;
56 | --border: 240 20% 20%;
57 | --input: 240 20% 20%;
58 | --ring: 240 50% 80%;
59 |
60 | --chart-1: 240 60% 50%;
61 | --chart-2: 240 50% 45%;
62 | --chart-3: 240 40% 40%;
63 | --chart-4: 240 70% 60%;
64 | --chart-5: 240 80% 55%;
65 |
66 | --sidebar-background: 240 10% 10%;
67 | --sidebar-foreground: 240 70% 60%;
68 | --sidebar-primary: 240 70% 60%;
69 | --sidebar-primary-foreground: 0 0% 100%;
70 | --sidebar-accent: 240 30% 30%;
71 | --sidebar-accent-foreground: 240 70% 60%;
72 | --sidebar-border: 240 20% 20%;
73 | --sidebar-ring: 240 50% 80%;
74 | }
--------------------------------------------------------------------------------
/src/app/tasks/components/DataTableColumnHeader.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ArrowDownIcon,
3 | ArrowUpIcon,
4 | CaretSortIcon,
5 | EyeNoneIcon,
6 | } from '@radix-ui/react-icons'
7 | import { Column } from '@tanstack/react-table'
8 |
9 | import { cn } from '@/lib/utils'
10 | import { Button } from '@/registry/new-york/ui/Button'
11 | import {
12 | DropdownMenu,
13 | DropdownMenuContent,
14 | DropdownMenuItem,
15 | DropdownMenuSeparator,
16 | DropdownMenuTrigger,
17 | } from '@/registry/new-york/ui/DropdownMenu'
18 |
19 | interface DataTableColumnHeaderProps
18 |
32 |
33 |
62 | No episodes added
34 |35 | You have not added any podcasts. Add one below. 36 |
37 | 61 |{title}
32 | }
33 |
34 | return (
35 |
36 |
37 |
38 |
52 |
53 |
54 | column.toggleSorting(false)}>
55 |
58 | column.toggleSorting(true)}>
59 |
62 | column.toggleVisibility(false)}>
64 |
67 |
68 |
69 |
70 | )
71 | }
72 |
--------------------------------------------------------------------------------
/src/app/playground/data/models.ts:
--------------------------------------------------------------------------------
1 | export const types = ['GPT-3', 'Codex'] as const
2 |
3 | export type ModelType = (typeof types)[number]
4 |
5 | export interface Modeldiv]:w-full',
23 | className
24 | )}
25 | {...props}
26 | />
27 | )
28 | }
29 |
30 | export default function CardsPage() {
31 | return (
32 | <>
33 |
11 |
12 | function Calendar({
13 | className,
14 | classNames,
15 | showOutsideDays = true,
16 | ...props
17 | }: CalendarProps) {
18 | return (
19 | .day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
43 | : '[&:has([aria-selected])]:rounded-md'
44 | ),
45 | day: cn(
46 | buttonVariants({ variant: 'ghost' }),
47 | 'h-8 w-8 p-0 font-normal aria-selected:opacity-100'
48 | ),
49 | day_range_start: 'day-range-start',
50 | day_range_end: 'day-range-end',
51 | day_selected:
52 | 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
53 | day_today: 'bg-accent text-accent-foreground',
54 | day_outside: 'text-muted-foreground opacity-50',
55 | day_disabled: 'text-muted-foreground opacity-50',
56 | day_range_middle:
57 | 'aria-selected:bg-accent aria-selected:text-accent-foreground',
58 | day_hidden: 'invisible',
59 | ...classNames,
60 | }}
61 | components={{
62 | IconLeft: ({ ...props }) =>
30 |
31 |
71 |
72 |
84 |
85 | )
86 | }
87 |
--------------------------------------------------------------------------------
/src/app/cards/components/ReportAnIssue.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { Button } from '@/registry/new-york/ui/Button'
4 | import {
5 | Card,
6 | CardContent,
7 | CardDescription,
8 | CardFooter,
9 | CardHeader,
10 | CardTitle,
11 | } from '@/registry/new-york/ui/Card'
12 | import { Input } from '@/registry/new-york/ui/Input'
13 | import { Label } from '@/registry/new-york/ui/Label'
14 | import {
15 | Select,
16 | SelectContent,
17 | SelectItem,
18 | SelectTrigger,
19 | SelectValue,
20 | } from '@/registry/new-york/ui/Select'
21 | import { Textarea } from '@/registry/new-york/ui/TextArea'
22 |
23 | export function DemoReportAnIssue() {
24 | return (
25 |
26 |
27 | Report an issue
28 |
29 | What area are you having problems with?
30 |
31 |
32 |
33 |
79 |
80 |
81 |
82 |
83 |
84 | )
85 | }
86 |
--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @import 'themes/ocean.css';
2 | @import 'themes/sunset.css';
3 | @import 'themes/crimson.css';
4 | @import 'themes/forest.css';
5 | @import 'themes/sapphire.css';
6 | @import 'themes/sunrise.css';
7 | @import 'themes/royal.css';
8 | @import 'themes/violet.css';
9 |
10 | @tailwind base;
11 | @tailwind components;
12 | @tailwind utilities;
13 |
14 | @layer base {
15 | :root {
16 | --background: 0 0% 100%;
17 | --foreground: 240 10% 3.9%;
18 | --card: 0 0% 100%;
19 | --card-foreground: 240 10% 3.9%;
20 | --popover: 0 0% 100%;
21 | --popover-foreground: 240 10% 3.9%;
22 | --primary: 240 5.9% 10%;
23 | --primary-foreground: 0 0% 98%;
24 | --secondary: 240 4.8% 95.9%;
25 | --secondary-foreground: 240 5.9% 10%;
26 | --muted: 240 4.8% 95.9%;
27 | --muted-foreground: 240 3.8% 46.1%;
28 | --accent: 240 4.8% 95.9%;
29 | --accent-foreground: 240 5.9% 10%;
30 | --destructive: 0 72.22% 50.59%;
31 | --destructive-foreground: 0 0% 98%;
32 | --border: 240 5.9% 90%;
33 | --input: 240 5.9% 90%;
34 | --ring: 240 5% 64.9%;
35 | --radius: 0.5rem;
36 |
37 | --chart-1: 12 76% 61%;
38 | --chart-2: 173 58% 39%;
39 | --chart-3: 197 37% 24%;
40 | --chart-4: 43 74% 66%;
41 | --chart-5: 27 87% 67%;
42 |
43 | --sidebar-background: 0 0% 98%;
44 | --sidebar-foreground: 240 5.3% 26.1%;
45 | --sidebar-primary: 240 5.9% 10%;
46 | --sidebar-primary-foreground: 0 0% 98%;
47 | --sidebar-accent: 240 4.8% 95.9%;
48 | --sidebar-accent-foreground: 240 5.9% 10%;
49 | --sidebar-border: 220 13% 91%;
50 | --sidebar-ring: 240 5% 64.9%;
51 | }
52 |
53 | .dark {
54 | --background: 240 10% 3.9%;
55 | --foreground: 0 0% 98%;
56 | --card: 240 10% 3.9%;
57 | --card-foreground: 0 0% 98%;
58 | --popover: 240 10% 3.9%;
59 | --popover-foreground: 0 0% 98%;
60 | --primary: 0 0% 98%;
61 | --primary-foreground: 240 5.9% 10%;
62 | --secondary: 240 3.7% 15.9%;
63 | --secondary-foreground: 0 0% 98%;
64 | --muted: 240 3.7% 15.9%;
65 | --muted-foreground: 240 5% 64.9%;
66 | --accent: 240 3.7% 15.9%;
67 | --accent-foreground: 0 0% 98%;
68 | --destructive: 0 62.8% 30.6%;
69 | --destructive-foreground: 0 85.7% 97.3%;
70 | --border: 240 3.7% 15.9%;
71 | --input: 240 3.7% 15.9%;
72 | --ring: 240 4.9% 83.9%;
73 |
74 | --chart-1: 220 70% 50%;
75 | --chart-2: 160 60% 45%;
76 | --chart-3: 30 80% 55%;
77 | --chart-4: 280 65% 60%;
78 | --chart-5: 340 75% 55%;
79 |
80 | --sidebar-background: 240 5.9% 10%;
81 | --sidebar-foreground: 240 4.8% 95.9%;
82 | --sidebar-primary: 224.3 76.3% 48%;
83 | --sidebar-primary-foreground: 0 0% 100%;
84 | --sidebar-accent: 240 3.7% 15.9%;
85 | --sidebar-accent-foreground: 240 4.8% 95.9%;
86 | --sidebar-border: 240 3.7% 15.9%;
87 | --sidebar-ring: 240 4.9% 83.9%;
88 | }
89 | }
90 |
91 | @layer base {
92 | * {
93 | @apply border-border;
94 | }
95 |
96 | body {
97 | @apply bg-background text-foreground;
98 | }
99 | }
--------------------------------------------------------------------------------
/src/app/mail/components/Nav.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Link from "next/link";
4 | import { LucideIcon } from "lucide-react";
5 |
6 | import { cn } from "@/lib/utils";
7 | import { buttonVariants } from "@/registry/default/ui/Button";
8 | import {
9 | Tooltip,
10 | TooltipContent,
11 | TooltipTrigger,
12 | } from "@/registry/new-york/ui/Tooltip";
13 |
14 | interface NavProps {
15 | isCollapsed: boolean;
16 | links: {
17 | title: string;
18 | label?: string;
19 | icon: LucideIcon;
20 | variant: "default" | "ghost";
21 | }[];
22 | }
23 |
24 | export function Nav({ links, isCollapsed }: NavProps) {
25 | return (
26 |
19 |
73 | );
74 | }
75 |
76 | function getBadgeVariantFromLabel(
77 | label: string,
78 | ): ComponentProps["variant"] {
79 | if (["work"].includes(label.toLowerCase())) {
80 | return "default";
81 | }
82 |
83 | if (["personal"].includes(label.toLowerCase())) {
84 | return "outline";
85 | }
86 |
87 | return "secondary";
88 | }
89 |
--------------------------------------------------------------------------------
/src/app/music/components/AlbumArtwork.tsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image'
2 | import { PlusCircledIcon } from '@radix-ui/react-icons'
3 |
4 | import { cn } from '@/lib/utils'
5 | import {
6 | ContextMenu,
7 | ContextMenuContent,
8 | ContextMenuItem,
9 | ContextMenuSeparator,
10 | ContextMenuSub,
11 | ContextMenuSubContent,
12 | ContextMenuSubTrigger,
13 | ContextMenuTrigger,
14 | } from '@/registry/new-york/ui/ContextMenu'
15 |
16 | import { Album } from '../data/albums'
17 | import { playlists } from '../data/playlists'
18 |
19 | interface AlbumArtworkProps extends React.HTMLAttributes {
20 | album: Album
21 | aspectRatio?: 'portrait' | 'square'
22 | width?: number
23 | height?: number
24 | }
25 |
26 | export function AlbumArtwork({
27 | album,
28 | aspectRatio = 'portrait',
29 | width,
30 | height,
31 | className,
32 | ...props
33 | }: AlbumArtworkProps) {
34 | return (
35 | {
19 | table: Table
20 | }
21 |
22 | export function DataTablePagination({
23 | table,
24 | }: DataTablePaginationProps) {
25 | return (
26 |
8 | >(({ className, ...props }, ref) => (
9 |
22 | >(({ className, ...props }, ref) => (
23 |
24 | ))
25 | TableHeader.displayName = 'TableHeader'
26 |
27 | const TableBody = React.forwardRef<
28 | HTMLTableSectionElement,
29 | React.HTMLAttributes
30 | >(({ className, ...props }, ref) => (
31 |
36 | ))
37 | TableBody.displayName = 'TableBody'
38 |
39 | const TableFooter = React.forwardRef<
40 | HTMLTableSectionElement,
41 | React.HTMLAttributes
42 | >(({ className, ...props }, ref) => (
43 |
48 | ))
49 | TableFooter.displayName = 'TableFooter'
50 |
51 | const TableRow = React.forwardRef<
52 | HTMLTableRowElement,
53 | React.HTMLAttributes
54 | >(({ className, ...props }, ref) => (
55 |
69 | >(({ className, ...props }, ref) => (
70 | [role=checkbox]]:translate-y-[2px]',
74 | className
75 | )}
76 | {...props}
77 | />
78 | ))
79 | TableHead.displayName = 'TableHead'
80 |
81 | const TableCell = React.forwardRef<
82 | HTMLTableCellElement,
83 | React.TdHTMLAttributes
84 | >(({ className, ...props }, ref) => (
85 | [role=checkbox]]:translate-y-[2px]',
89 | className
90 | )}
91 | {...props}
92 | />
93 | ))
94 | TableCell.displayName = 'TableCell'
95 |
96 | const TableCaption = React.forwardRef<
97 | HTMLTableCaptionElement,
98 | React.HTMLAttributes
99 | >(({ className, ...props }, ref) => (
100 | [] = [
14 | {
15 | id: 'select',
16 | header: ({ table }) => (
17 | table.toggleAllPageRowsSelected(!!value)}
20 | aria-label='Select all'
21 | className='translate-y-[2px]'
22 | />
23 | ),
24 | cell: ({ row }) => (
25 | row.toggleSelected(!!value)}
28 | aria-label='Select row'
29 | className='translate-y-[2px]'
30 | />
31 | ),
32 | enableSorting: false,
33 | enableHiding: false,
34 | },
35 | {
36 | accessorKey: 'id',
37 | header: ({ column }) => (
38 | {}
55 |
56 | export function ExamplesNav({ className, ...props }: ExamplesNavProps) {
57 | const pathname = usePathname();
58 |
59 | return (
60 | {
32 | columns: ColumnDef[]
33 | data: TData[]
34 | }
35 |
36 | export function DataTable({
37 | columns,
38 | data,
39 | }: DataTableProps) {
40 | const [rowSelection, setRowSelection] = React.useState({})
41 | const [columnVisibility, setColumnVisibility] =
42 | React.useState({})
43 | const [columnFilters, setColumnFilters] = React.useState(
44 | []
45 | )
46 | const [sorting, setSorting] = React.useState([])
47 |
48 | const table = useReactTable({
49 | data,
50 | columns,
51 | state: {
52 | sorting,
53 | columnVisibility,
54 | rowSelection,
55 | columnFilters,
56 | },
57 | enableRowSelection: true,
58 | onRowSelectionChange: setRowSelection,
59 | onSortingChange: setSorting,
60 | onColumnFiltersChange: setColumnFilters,
61 | onColumnVisibilityChange: setColumnVisibility,
62 | getCoreRowModel: getCoreRowModel(),
63 | getFilteredRowModel: getFilteredRowModel(),
64 | getPaginationRowModel: getPaginationRowModel(),
65 | getSortedRowModel: getSortedRowModel(),
66 | getFacetedRowModel: getFacetedRowModel(),
67 | getFacetedUniqueValues: getFacetedUniqueValues(),
68 | })
69 |
70 | return (
71 |
54 |
55 | // This can come from your database or API.
56 | const defaultValues: Partial = {
57 | items: ['recents', 'home'],
58 | }
59 |
60 | export function DisplayForm() {
61 | const form = useForm({
62 | resolver: zodResolver(displayFormSchema),
63 | defaultValues,
64 | })
65 |
66 | function onSubmit(data: DisplayFormValues) {
67 | toast({
68 | title: 'You submitted the following values:',
69 | description: (
70 |
29 |
30 | Share this document
31 |
32 | Anyone with the link can view this document.
33 |
34 |
35 |
36 |
118 |
119 | )
120 | }
121 |
--------------------------------------------------------------------------------
/src/app/playground/components/PresetActions.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as React from 'react'
4 | import { Dialog } from '@radix-ui/react-dialog'
5 | import { DotsHorizontalIcon } from '@radix-ui/react-icons'
6 |
7 | import {
8 | AlertDialog,
9 | AlertDialogCancel,
10 | AlertDialogContent,
11 | AlertDialogDescription,
12 | AlertDialogFooter,
13 | AlertDialogHeader,
14 | AlertDialogTitle,
15 | } from '@/registry/new-york/ui/AlertDialog'
16 | import { Button } from '@/registry/new-york/ui/Button'
17 | import {
18 | DialogContent,
19 | DialogDescription,
20 | DialogFooter,
21 | DialogHeader,
22 | DialogTitle,
23 | } from '@/registry/new-york/ui/Dialog'
24 | import {
25 | DropdownMenu,
26 | DropdownMenuContent,
27 | DropdownMenuItem,
28 | DropdownMenuSeparator,
29 | DropdownMenuTrigger,
30 | } from '@/registry/new-york/ui/DropdownMenu'
31 | import { Label } from '@/registry/new-york/ui/Label'
32 | import { Switch } from '@/registry/new-york/ui/Switch'
33 | import { toast } from '@/registry/new-york/ui/use-toast'
34 |
35 | export function PresetActions() {
36 | const [open, setIsOpen] = React.useState(false)
37 | const [showDeleteDialog, setShowDeleteDialog] = React.useState(false)
38 |
39 | return (
40 | <>
41 |
42 |
43 |
47 |
48 |
49 | setIsOpen(true)}>
50 | Content filter preferences
51 |
52 | setShowDeleteDialog(true)}
55 | className='text-red-600'
56 | >
57 | Delete preset
58 |
59 |
60 |
61 |
95 |
96 |
97 |
98 | Are you sure absolutely sure?
99 |
100 | This action cannot be undone. This preset will no longer be
101 | accessible by you or others you've shared it with.
102 |
103 |
104 |
105 | Cancel
106 |
117 |
118 |
119 |
120 |
121 | )
122 | }
123 |
--------------------------------------------------------------------------------
/src/registry/new-york/ui/Dialog.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as DialogPrimitive from "@radix-ui/react-dialog";
5 | import { Cross2Icon } from "@radix-ui/react-icons";
6 |
7 | import { cn } from "@/lib/utils";
8 |
9 | const Dialog = DialogPrimitive.Root;
10 |
11 | const DialogTrigger = DialogPrimitive.Trigger;
12 |
13 | const DialogPortal = DialogPrimitive.Portal;
14 |
15 | const DialogClose = DialogPrimitive.Close;
16 |
17 | const DialogOverlay = React.forwardRef<
18 | React.ElementRef,
19 | React.ComponentPropsWithoutRef
20 | >(({ className, ...props }, ref) => (
21 | ,
34 | React.ComponentPropsWithoutRef
35 | >(({ className, children, ...props }, ref) => (
36 |
37 |
46 | {children}
47 |
48 |
51 |
52 |
53 | ));
54 | DialogContent.displayName = DialogPrimitive.Content.displayName;
55 |
56 | const DialogHeader = ({
57 | className,
58 | ...props
59 | }: React.HTMLAttributes) => (
60 |
67 | );
68 | DialogHeader.displayName = "DialogHeader";
69 |
70 | const DialogFooter = ({
71 | className,
72 | ...props
73 | }: React.HTMLAttributes) => (
74 |
81 | );
82 | DialogFooter.displayName = "DialogFooter";
83 |
84 | const DialogTitle = React.forwardRef<
85 | React.ElementRef,
86 | React.ComponentPropsWithoutRef
87 | >(({ className, ...props }, ref) => (
88 | ,
101 | React.ComponentPropsWithoutRef
102 | >(({ className, ...props }, ref) => (
103 |
43 | }
44 | | {
45 | type: ActionType['DISMISS_TOAST']
46 | toastId?: ToasterToast['id']
47 | }
48 | | {
49 | type: ActionType['REMOVE_TOAST']
50 | toastId?: ToasterToast['id']
51 | }
52 |
53 | interface State {
54 | toasts: ToasterToast[]
55 | }
56 |
57 | const toastTimeouts = new Map>()
58 |
59 | const addToRemoveQueue = (toastId: string) => {
60 | if (toastTimeouts.has(toastId)) {
61 | return
62 | }
63 |
64 | const timeout = setTimeout(() => {
65 | toastTimeouts.delete(toastId)
66 | dispatch({
67 | type: 'REMOVE_TOAST',
68 | toastId: toastId,
69 | })
70 | }, TOAST_REMOVE_DELAY)
71 |
72 | toastTimeouts.set(toastId, timeout)
73 | }
74 |
75 | export const reducer = (state: State, action: Action): State => {
76 | switch (action.type) {
77 | case 'ADD_TOAST':
78 | return {
79 | ...state,
80 | toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
81 | }
82 |
83 | case 'UPDATE_TOAST':
84 | return {
85 | ...state,
86 | toasts: state.toasts.map((t) =>
87 | t.id === action.toast.id ? { ...t, ...action.toast } : t
88 | ),
89 | }
90 |
91 | case 'DISMISS_TOAST': {
92 | const { toastId } = action
93 |
94 | // ! Side effects ! - This could be extracted into a dismissToast() action,
95 | // but I'll keep it here for simplicity
96 | if (toastId) {
97 | addToRemoveQueue(toastId)
98 | } else {
99 | state.toasts.forEach((toast) => {
100 | addToRemoveQueue(toast.id)
101 | })
102 | }
103 |
104 | return {
105 | ...state,
106 | toasts: state.toasts.map((t) =>
107 | t.id === toastId || toastId === undefined
108 | ? {
109 | ...t,
110 | open: false,
111 | }
112 | : t
113 | ),
114 | }
115 | }
116 | case 'REMOVE_TOAST':
117 | if (action.toastId === undefined) {
118 | return {
119 | ...state,
120 | toasts: [],
121 | }
122 | }
123 | return {
124 | ...state,
125 | toasts: state.toasts.filter((t) => t.id !== action.toastId),
126 | }
127 | }
128 | }
129 |
130 | const listeners: Array<(state: State) => void> = []
131 |
132 | let memoryState: State = { toasts: [] }
133 |
134 | function dispatch(action: Action) {
135 | memoryState = reducer(memoryState, action)
136 | listeners.forEach((listener) => {
137 | listener(memoryState)
138 | })
139 | }
140 |
141 | type Toast = Omit
142 |
143 | function toast({ ...props }: Toast) {
144 | const id = genId()
145 |
146 | const update = (props: ToasterToast) =>
147 | dispatch({
148 | type: 'UPDATE_TOAST',
149 | toast: { ...props, id },
150 | })
151 | const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })
152 |
153 | dispatch({
154 | type: 'ADD_TOAST',
155 | toast: {
156 | ...props,
157 | id,
158 | open: true,
159 | onOpenChange: (open) => {
160 | if (!open) dismiss()
161 | },
162 | },
163 | })
164 |
165 | return {
166 | id: id,
167 | dismiss,
168 | update,
169 | }
170 | }
171 |
172 | function useToast() {
173 | const [state, setState] = React.useState(memoryState)
174 |
175 | React.useEffect(() => {
176 | listeners.push(setState)
177 | return () => {
178 | const index = listeners.indexOf(setState)
179 | if (index > -1) {
180 | listeners.splice(index, 1)
181 | }
182 | }
183 | }, [state])
184 |
185 | return {
186 | ...state,
187 | toast,
188 | dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
189 | }
190 | }
191 |
192 | export { useToast, toast }
193 |
--------------------------------------------------------------------------------
34 |
49 |
50 |
84 |
85 | )
86 | }
87 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "shadcn-ui-themes",
3 | "version": "2.0.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev --turbo",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@faker-js/faker": "8.2.0",
13 | "@hookform/resolvers": "3.3.1",
14 | "@radix-ui/react-alert-dialog": "1.0.4",
15 | "@radix-ui/react-avatar": "1.0.3",
16 | "@radix-ui/react-checkbox": "1.0.4",
17 | "@radix-ui/react-context-menu": "2.1.4",
18 | "@radix-ui/react-dialog": "1.1.1",
19 | "@radix-ui/react-dropdown-menu": "2.0.5",
20 | "@radix-ui/react-hover-card": "1.0.6",
21 | "@radix-ui/react-icons": "1.3.0",
22 | "@radix-ui/react-label": "2.0.2",
23 | "@radix-ui/react-menubar": "1.0.3",
24 | "@radix-ui/react-popover": "1.0.6",
25 | "@radix-ui/react-radio-group": "1.1.3",
26 | "@radix-ui/react-scroll-area": "1.0.4",
27 | "@radix-ui/react-select": "2.0.0",
28 | "@radix-ui/react-separator": "1.0.3",
29 | "@radix-ui/react-slider": "1.1.2",
30 | "@radix-ui/react-slot": "1.0.2",
31 | "@radix-ui/react-switch": "1.0.3",
32 | "@radix-ui/react-tabs": "1.0.4",
33 | "@radix-ui/react-toast": "1.1.4",
34 | "@radix-ui/react-tooltip": "1.0.6",
35 | "@tanstack/react-table": "8.9.7",
36 | "@types/js-cookie": "3.0.3",
37 | "@types/node": "20.5.9",
38 | "@types/react": "^18.2.65",
39 | "@types/react-dom": "^18.2.22",
40 | "@vercel/analytics": "^1.3.2",
41 | "autoprefixer": "10.4.15",
42 | "class-variance-authority": "^0.7.0",
43 | "clsx": "^2.0.0",
44 | "cmdk": "1.0.0",
45 | "date-fns": "2.30.0",
46 | "eslint": "8.48.0",
47 | "eslint-config-next": "13.4.19",
48 | "jotai": "2.4.1",
49 | "js-cookie": "3.0.5",
50 | "lucide-react": "^0.359.0",
51 | "next": "14.3.0-canary.43",
52 | "next-themes": "0.2.1",
53 | "postcss": "8.4.31",
54 | "react": "18.2.0",
55 | "react-day-picker": "8.8.1",
56 | "react-dom": "18.2.0",
57 | "react-hook-form": "7.46.1",
58 | "react-resizable-panels": "^2.0.22",
59 | "react-wrap-balancer": "1.1.0",
60 | "recharts": "2.12.7",
61 | "tailwind-merge": "^1.14.0",
62 | "tailwindcss": "3.4.6",
63 | "tailwindcss-animate": "^1.0.7",
64 | "typescript": "^5.5.3",
65 | "zod": "3.22.3"
66 | },
67 | "devDependencies": {
68 | "prettier": "3.0.3",
69 | "prettier-plugin-tailwindcss": "0.5.4"
70 | },
71 | "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
72 | }
73 |
--------------------------------------------------------------------------------
/src/app/dashboard/components/RecentSales.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Avatar,
3 | AvatarFallback,
4 | AvatarImage,
5 | } from '@/registry/new-york/ui/Avatar'
6 |
7 | export function RecentSales() {
8 | return (
9 |
51 |
52 |
54 |
55 |
57 |
58 |
59 |
60 |
62 |
63 |
65 |
66 |
68 |
69 |
71 |
72 |
73 |
74 |
76 |
77 |
79 |
80 |
82 |
83 |
10 |
70 | )
71 | }
72 |
--------------------------------------------------------------------------------
/src/registry/new-york/ui/Calendar.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as React from 'react'
4 | import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons'
5 | import { DayPicker } from 'react-day-picker'
6 |
7 | import { cn } from '@/lib/utils'
8 | import { buttonVariants } from '@/registry/default/ui/Button'
9 |
10 | export type CalendarProps = React.ComponentProps
11 |
12 | OM
14 |
15 |
23 |
16 |
21 | Olivia Martin
17 |18 | olivia.martin@email.com 19 |
20 |+$1,999.00
22 |
24 |
25 | JL
27 |
28 |
34 |
29 |
32 | Jackson Lee
30 |jackson.lee@email.com
31 |+$39.00
33 |
35 |
36 | IN
38 |
39 |
47 |
40 |
45 | Isabella Nguyen
41 |42 | isabella.nguyen@email.com 43 |
44 |+$299.00
46 |
48 |
49 | WK
51 |
52 |
58 |
53 |
56 | William Kim
54 |will@email.com
55 |+$99.00
57 |
59 |
60 | SD
62 |
63 |
69 |
64 |
67 | Sofia Davis
65 |sofia.davis@email.com
66 |+$39.00
68 |
32 | shadcn/ui
33 |
34 | Beautifully designed components built with Radix UI and Tailwind
35 | CSS.
36 |
37 |
38 |
39 |
43 |
45 |
46 |
49 |
50 |
56 | Suggested Lists
57 |
59 | Future Ideas
60 |
61 | My Stack
62 | Inspiration
63 |
65 |
67 |
68 |
69 |
70 |
73 |
83 |
74 |
77 |
78 |
81 | Updated April 2023
82 |
34 |
67 |
35 |
36 |
48 |
49 |
50 |
51 |
65 |
66 |
68 |
69 |
70 |
71 |
72 |
73 |
77 |
78 |
30 |
85 |
86 | );
87 | }
88 |
--------------------------------------------------------------------------------
/src/app/mail/components/MailList.tsx:
--------------------------------------------------------------------------------
1 | import formatDistanceToNow from "date-fns/formatDistanceToNow";
2 | import { ComponentProps } from "react";
3 |
4 | import { useMail } from "@/app/mail/use-mail";
5 | import { Mail } from "@/app/mail/Data";
6 | import { cn } from "@/lib/utils";
7 | import { Badge } from "@/registry/new-york/ui/Badge";
8 | import { ScrollArea } from "@/registry/new-york/ui/ScrollArea";
9 |
10 | interface MailListProps {
11 | items: Mail[];
12 | }
13 |
14 | export function MailList({ items }: MailListProps) {
15 | const [mail, setMail] = useMail();
16 |
17 | return (
18 |
20 | {items.map((item) => (
21 |
70 | ))}
71 |
72 |
36 |
37 |
38 |
51 |
52 | Add to Library
53 |
54 | Add to Playlist
55 |
56 |
57 |
60 |
63 |
75 | {playlist}
76 |
77 | ))}
78 |
79 |
80 | Play Next
82 | Play Later
83 | Create Station
84 | Like
86 | Share
87 |
88 |
89 |
94 | )
95 | }
96 |
--------------------------------------------------------------------------------
/src/app/tasks/components/DataTablePagination.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ChevronLeftIcon,
3 | ChevronRightIcon,
4 | DoubleArrowLeftIcon,
5 | DoubleArrowRightIcon,
6 | } from '@radix-ui/react-icons'
7 | import { Table } from '@tanstack/react-table'
8 |
9 | import { Button } from '@/registry/new-york/ui/Button'
10 | import {
11 | Select,
12 | SelectContent,
13 | SelectItem,
14 | SelectTrigger,
15 | SelectValue,
16 | } from '@/registry/new-york/ui/Select'
17 |
18 | interface DataTablePaginationProps
39 |
50 |
90 |
93 | {album.name}
91 |{album.artist}
92 |
27 |
96 | )
97 | }
98 |
--------------------------------------------------------------------------------
/src/registry/new-york/ui/Table.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import { cn } from '@/lib/utils'
4 |
5 | const Table = React.forwardRef<
6 | HTMLTableElement,
7 | React.HTMLAttributes
28 | {table.getFilteredSelectedRowModel().rows.length} of{' '}
29 | {table.getFilteredRowModel().rows.length} row(s) selected.
30 |
31 |
32 |
95 |
33 |
52 | Rows per page
34 | 51 |
53 | Page {table.getState().pagination.pageIndex + 1} of{' '}
54 | {table.getPageCount()}
55 |
56 |
57 |
66 |
75 |
84 |
93 |
94 |
10 |
15 |
16 | ))
17 | Table.displayName = 'Table'
18 |
19 | const TableHeader = React.forwardRef<
20 | HTMLTableSectionElement,
21 | React.HTMLAttributes{row.getValue('id')}
,
41 | enableSorting: false,
42 | enableHiding: false,
43 | },
44 | {
45 | accessorKey: 'title',
46 | header: ({ column }) => (
47 |
54 | {label && {label.label} }
55 |
56 | {row.getValue('title')}
57 |
58 |
59 | )
60 | },
61 | },
62 | {
63 | accessorKey: 'status',
64 | header: ({ column }) => (
65 |
78 | {status.icon && (
79 |
83 | )
84 | },
85 | filterFn: (row, id, value) => {
86 | return value.includes(row.getValue(id))
87 | },
88 | },
89 | {
90 | accessorKey: 'priority',
91 | header: ({ column }) => (
92 |
105 | {priority.icon && (
106 |
110 | )
111 | },
112 | filterFn: (row, id, value) => {
113 | return value.includes(row.getValue(id))
114 | },
115 | },
116 | {
117 | id: 'actions',
118 | cell: ({ row }) =>
18 |
33 |
34 |
41 | Login
42 |
43 |
102 |
103 | )
104 | }
105 |
--------------------------------------------------------------------------------
/src/components/ExamplesNav.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Link from "next/link";
4 | import { usePathname } from "next/navigation";
5 | import { ArrowRightIcon } from "@radix-ui/react-icons";
6 |
7 | import { cn } from "@/lib/utils";
8 | import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/ScrollArea";
9 | import ThemeSelector from "./ThemeSelector";
10 |
11 | const examples = [
12 | {
13 | name: "Mail",
14 | href: "/",
15 | code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/mail",
16 | },
17 | {
18 | name: "Dashboard",
19 | href: "/dashboard",
20 | code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/dashboard",
21 | },
22 | {
23 | name: "Cards",
24 | href: "/cards",
25 | code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/cards",
26 | },
27 | {
28 | name: "Tasks",
29 | href: "/tasks",
30 | code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/tasks",
31 | },
32 | {
33 | name: "Playground",
34 | href: "/playground",
35 | code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/playground",
36 | },
37 | {
38 | name: "Forms",
39 | href: "/forms",
40 | code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/forms",
41 | },
42 | {
43 | name: "Music",
44 | href: "/music",
45 | code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/music",
46 | },
47 | {
48 | name: "Authentication",
49 | href: "/authentication",
50 | code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/authentication",
51 | },
52 | ];
53 |
54 | interface ExamplesNavProps extends React.HTMLAttributes
44 |
45 |
71 |
46 |
58 | Acme Inc
59 |
60 |
61 |
70 | 62 |69 |63 | “This library has saved me countless hours of work and 64 | helped me deliver stunning designs to my clients faster than 65 | ever before.” 66 |
67 | 68 |
72 |
101 |
73 |
100 |
74 |
81 | 75 | Create an account 76 |
77 |78 | Enter your email below to create your account 79 |
80 |83 | By clicking continue, you agree to our{' '} 84 | 88 | Terms of Service 89 | {' '} 90 | and{' '} 91 | 95 | Privacy Policy 96 | 97 | . 98 |
99 |
61 |
62 |
81 |
83 | );
84 | }
85 |
86 | interface ExampleCodeLinkProps {
87 | pathname: string | null;
88 | }
89 |
90 | export function ExampleCodeLink({ pathname }: ExampleCodeLinkProps) {
91 | const example = examples.find(
92 | (example) => pathname?.startsWith(example.href),
93 | );
94 |
95 | if (!example?.code) {
96 | return null;
97 | }
98 |
99 | return (
100 |
106 | View code
107 |
63 | {examples.map((example, index) => (
64 |
75 | {example.name}
76 |
77 | ))}
78 |
79 |
72 |
125 | )
126 | }
127 |
--------------------------------------------------------------------------------
/src/app/forms/display/DisplayForm.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { zodResolver } from '@hookform/resolvers/zod'
4 | import { useForm } from 'react-hook-form'
5 | import * as z from 'zod'
6 |
7 | import { Button } from '@/registry/new-york/ui/Button'
8 | import { Checkbox } from '@/registry/new-york/ui/Checkbox'
9 | import {
10 | Form,
11 | FormControl,
12 | FormDescription,
13 | FormField,
14 | FormItem,
15 | FormLabel,
16 | FormMessage,
17 | } from '@/registry/new-york/ui/Form'
18 | import { toast } from '@/registry/new-york/ui/use-toast'
19 |
20 | const items = [
21 | {
22 | id: 'recents',
23 | label: 'Recents',
24 | },
25 | {
26 | id: 'home',
27 | label: 'Home',
28 | },
29 | {
30 | id: 'applications',
31 | label: 'Applications',
32 | },
33 | {
34 | id: 'desktop',
35 | label: 'Desktop',
36 | },
37 | {
38 | id: 'downloads',
39 | label: 'Downloads',
40 | },
41 | {
42 | id: 'documents',
43 | label: 'Documents',
44 | },
45 | ] as const
46 |
47 | const displayFormSchema = z.object({
48 | items: z.array(z.string()).refine((value) => value.some((item) => item), {
49 | message: 'You have to select at least one item.',
50 | }),
51 | })
52 |
53 | type DisplayFormValues = z.infer
74 |
75 |
122 |
123 |
71 | {JSON.stringify(data, null, 2)}
72 |
73 | ),
74 | })
75 | }
76 |
77 | return (
78 |
130 |
131 | )
132 | }
133 |
--------------------------------------------------------------------------------
/src/app/cards/components/ShareDocument.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import {
4 | Avatar,
5 | AvatarFallback,
6 | AvatarImage,
7 | } from '@/registry/new-york/ui/Avatar'
8 | import { Button } from '@/registry/new-york/ui/Button'
9 | import {
10 | Card,
11 | CardContent,
12 | CardDescription,
13 | CardHeader,
14 | CardTitle,
15 | } from '@/registry/new-york/ui/Card'
16 | import { Input } from '@/registry/new-york/ui/Input'
17 | import {
18 | Select,
19 | SelectContent,
20 | SelectItem,
21 | SelectTrigger,
22 | SelectValue,
23 | } from '@/registry/new-york/ui/Select'
24 | import { Separator } from '@/registry/new-york/ui/Separator'
25 |
26 | export function DemoShareDocument() {
27 | return (
28 |
37 |
38 |
41 |
42 |
44 |
117 | People with access
45 |
46 |
116 |
47 |
69 |
48 |
49 | OM
51 |
52 |
59 |
68 |
53 |
58 | 54 | Olivia Martin 55 |
56 |m@example.com
57 |
70 |
92 |
71 |
72 | IN
74 |
75 |
82 |
91 |
76 |
81 | 77 | Isabella Nguyen 78 |
79 |b@example.com
80 |
93 |
115 |
94 |
95 | SD
97 |
98 |
105 |
114 |
99 |
104 | 100 | Sofia Davis 101 |
102 |p@example.com
103 |