From a703c6fb583a8ed7c493aff8292078036a5e2415 Mon Sep 17 00:00:00 2001 From: shadcn Date: Mon, 17 Apr 2023 19:19:40 +0400 Subject: [PATCH] feat: CSS variables and CLI (#180) --- .changeset/config.json | 2 +- .eslintrc.json | 11 +- README.md | 37 +- apps/www/.env.example | 2 +- apps/www/app/docs/[[...slug]]/head.tsx | 25 - apps/www/app/docs/[[...slug]]/page.tsx | 135 +- apps/www/app/docs/layout.tsx | 6 +- .../components/user-auth-form.tsx | 71 + apps/www/app/examples/authentication/page.tsx | 99 + .../cards/components/cookie-settings.tsx | 60 + .../cards/components/create-account.tsx | 60 + .../examples/cards/components/date-picker.tsx | 18 + .../examples/cards/components/github-card.tsx | 81 + .../cards/components/notifications.tsx | 51 + .../cards/components/payment-method.tsx | 117 + .../cards/components/report-an-issue.tsx | 82 + .../cards/components/share-document.tsx | 116 + .../cards/components/team-members.tsx | 147 + apps/www/app/examples/cards/page.tsx | 93 + apps/www/app/examples/cards/styles.css | 63 + .../components/date-range-picker.tsx | 66 + .../dashboard/components/main-nav.tsx | 40 + .../dashboard/components/overview.tsx | 78 + .../dashboard/components/recent-sales.tsx | 67 + .../examples/dashboard/components/search.tsx | 13 + .../dashboard/components/team-switcher.tsx | 205 + .../dashboard/components/user-nav.tsx | 67 + apps/www/app/examples/dashboard/page.tsx | 165 + apps/www/app/examples/layout.tsx | 69 + .../music/components/album-artwork.tsx | 84 + .../app/examples/music/components/menu.tsx | 178 + .../components/podcast-empty-placeholder.tsx | 53 + .../app/examples/music/components/sidebar.tsx | 99 + apps/www/app/examples/music/data/albums.ts | 71 + apps/www/app/examples/music/data/playlists.ts | 16 + apps/www/app/examples/music/page.tsx | 154 + apps/www/app/examples/music/styles.css | 65 + .../playground/components/code-viewer.tsx | 8 +- .../examples}/playground/components/icons.tsx | 1 - .../components/maxlength-selector.tsx | 2 +- .../playground/components/model-selector.tsx | 24 +- .../playground/components/preset-actions.tsx | 10 +- .../playground/components/preset-save.tsx | 4 +- .../playground/components/preset-selector.tsx | 6 +- .../playground/components/preset-share.tsx | 22 +- .../components/temperature-selector.tsx | 2 +- .../playground/components/top-p-selector.tsx | 2 +- .../app/examples}/playground/data/models.ts | 10 +- .../app/examples}/playground/data/presets.ts | 5 +- apps/www/app/examples/playground/page.tsx | 178 + apps/www/app/examples/playground/styles.css | 65 + apps/www/app/figma/page.tsx | 56 +- apps/www/app/head.tsx | 43 - apps/www/app/layout.tsx | 75 +- apps/www/app/page.tsx | 107 +- apps/www/app/sink/page.tsx | 201 + apps/www/assets/fonts/CalSans-SemiBold.ttf | Bin 0 -> 148964 bytes apps/www/assets/fonts/CalSans-SemiBold.woff | Bin 0 -> 52504 bytes apps/www/assets/fonts/CalSans-SemiBold.woff2 | Bin 0 -> 40932 bytes apps/www/components/apple-music-demo.tsx | 745 --- apps/www/components/callout.tsx | 27 +- apps/www/components/card.tsx | 38 - apps/www/components/code-block-wrapper.tsx | 6 +- apps/www/components/command-menu.tsx | 20 +- apps/www/components/component-card.tsx | 2 +- apps/www/components/component-example.tsx | 35 +- apps/www/components/copy-button.tsx | 28 +- apps/www/components/examples-nav.tsx | 58 + .../components/examples/accordion/demo.tsx | 2 +- .../components/examples/alert-dialog/demo.tsx | 4 +- apps/www/components/examples/alert/demo.tsx | 15 + .../components/examples/alert/destructive.tsx | 15 + .../components/examples/aspect-ratio/demo.tsx | 8 +- apps/www/components/examples/avatar/demo.tsx | 2 - apps/www/components/examples/badge/demo.tsx | 5 + .../components/examples/badge/destructive.tsx | 5 + .../www/components/examples/badge/outline.tsx | 5 + .../components/examples/badge/secondary.tsx | 5 + .../components/examples/button/secondary.tsx | 5 + .../www/components/examples/button/subtle.tsx | 5 - .../examples/calendar/date-picker.tsx | 43 + .../examples/calendar/date-range-picker.tsx | 65 + .../www/components/examples/calendar/demo.tsx | 18 + .../examples/calendar/with-presets.tsx | 62 + apps/www/components/examples/card/demo.tsx | 79 + .../components/examples/card/with-form.tsx | 59 + .../components/examples/checkbox/disabled.tsx | 2 - .../examples/checkbox/with-text.tsx | 2 +- .../components/examples/collapsible/demo.tsx | 6 +- apps/www/components/examples/command/demo.tsx | 4 +- .../components/examples/command/dialog.tsx | 4 +- .../examples/command/dropdown-menu.tsx | 8 +- .../components/examples/command/popover.tsx | 4 +- .../components/examples/context-menu/demo.tsx | 24 +- apps/www/components/examples/dialog/demo.tsx | 2 - .../examples/dropdown-menu/demo.tsx | 2 - .../components/examples/hover-card/demo.tsx | 2 +- apps/www/components/examples/index.tsx | 36 +- apps/www/components/examples/input/file.tsx | 11 + .../components/examples/input/with-text.tsx | 2 +- apps/www/components/examples/menubar/demo.tsx | 2 - .../examples/navigation-menu/demo.tsx | 14 +- apps/www/components/examples/popover/demo.tsx | 4 +- .../components/examples/radio-group/demo.tsx | 2 - .../components/examples/scroll-area/demo.tsx | 2 +- apps/www/components/examples/select/demo.tsx | 22 - .../components/examples/separator/demo.tsx | 2 +- apps/www/components/examples/sheet/demo.tsx | 2 - .../www/components/examples/skeleton/demo.tsx | 13 + apps/www/components/examples/slider/demo.tsx | 15 +- apps/www/components/examples/tabs/demo.tsx | 84 +- .../examples/textarea/with-text.tsx | 2 +- apps/www/components/examples/toast/demo.tsx | 3 +- .../components/examples/toast/destructive.tsx | 3 +- apps/www/components/examples/toast/simple.tsx | 3 +- .../components/examples/toast/with-action.tsx | 3 +- .../components/examples/toast/with-title.tsx | 3 +- apps/www/components/examples/toggle/demo.tsx | 6 +- .../components/examples/toggle/disabled.tsx | 4 +- apps/www/components/examples/tooltip/demo.tsx | 2 - .../examples/typography/blockquote.tsx | 2 +- .../components/examples/typography/demo.tsx | 30 +- .../www/components/examples/typography/h2.tsx | 2 +- .../www/components/examples/typography/h3.tsx | 2 +- .../www/components/examples/typography/h4.tsx | 2 +- .../examples/typography/inline-code.tsx | 2 +- .../components/examples/typography/large.tsx | 4 +- .../components/examples/typography/lead.tsx | 2 +- .../components/examples/typography/muted.tsx | 5 + .../components/examples/typography/subtle.tsx | 7 - .../components/examples/typography/table.tsx | 24 +- apps/www/components/fonts.tsx | 31 - apps/www/components/icons.tsx | 30 +- apps/www/components/main-nav.tsx | 51 +- .../{mdx.tsx => mdx-components.tsx} | 79 +- apps/www/components/mdx-head.tsx | 67 - apps/www/components/mobile-nav.tsx | 148 +- apps/www/components/mode-toggle.tsx | 8 +- apps/www/components/page-header.tsx | 64 +- apps/www/components/sidebar-nav.tsx | 9 +- apps/www/components/site-footer.tsx | 8 +- apps/www/components/site-header.tsx | 31 +- apps/www/components/style-switcher.tsx | 19 + apps/www/components/toc.tsx | 6 +- apps/www/components/ui/accordion.tsx | 9 +- apps/www/components/ui/alert-dialog.tsx | 22 +- apps/www/components/ui/alert.tsx | 59 + apps/www/components/ui/avatar.tsx | 2 +- apps/www/components/ui/badge.tsx | 36 + apps/www/components/ui/button.tsx | 20 +- apps/www/components/ui/calendar.tsx | 64 + apps/www/components/ui/card.tsx | 79 + apps/www/components/ui/checkbox.tsx | 4 +- apps/www/components/ui/command.tsx | 21 +- apps/www/components/ui/context-menu.tsx | 18 +- apps/www/components/ui/dialog.tsx | 18 +- apps/www/components/ui/dropdown-menu.tsx | 21 +- apps/www/components/ui/hover-card.tsx | 2 +- apps/www/components/ui/input.tsx | 5 +- apps/www/components/ui/label.tsx | 13 +- apps/www/components/ui/menubar.tsx | 22 +- apps/www/components/ui/navigation-menu.tsx | 12 +- apps/www/components/ui/popover.tsx | 2 +- apps/www/components/ui/progress.tsx | 4 +- apps/www/components/ui/radio-group.tsx | 4 +- apps/www/components/ui/scroll-area.tsx | 2 +- apps/www/components/ui/select.tsx | 29 +- apps/www/components/ui/separator.tsx | 2 +- apps/www/components/ui/sheet.tsx | 14 +- apps/www/components/ui/skeleton.tsx | 15 + apps/www/components/ui/slider.tsx | 6 +- apps/www/components/ui/switch.tsx | 4 +- apps/www/components/ui/tabs.tsx | 10 +- apps/www/components/ui/textarea.tsx | 2 +- apps/www/components/ui/toast.tsx | 13 +- apps/www/components/ui/toaster.tsx | 3 +- apps/www/components/ui/toggle.tsx | 4 +- apps/www/components/ui/tooltip.tsx | 5 +- apps/www/components/ui/use-toast.ts | 2 +- apps/www/config/components.ts | 26 + apps/www/config/docs.ts | 116 +- apps/www/config/site.ts | 15 +- apps/www/content/docs/cli.mdx | 36 + .../{primitives => components}/accordion.mdx | 61 +- .../alert-dialog.mdx | 14 + apps/www/content/docs/components/alert.mdx | 61 + .../aspect-ratio.mdx | 19 +- .../{primitives => components}/avatar.mdx | 14 + apps/www/content/docs/components/badge.mdx | 88 + .../{primitives => components}/button.mdx | 46 +- apps/www/content/docs/components/calendar.mdx | 85 + apps/www/content/docs/components/card.mdx | 68 + .../{primitives => components}/checkbox.mdx | 14 + .../collapsible.mdx | 14 + .../{primitives => components}/command.mdx | 26 +- .../context-menu.mdx | 14 + .../{primitives => components}/dialog.mdx | 20 +- .../dropdown-menu.mdx | 14 + .../{primitives => components}/hover-card.mdx | 21 +- .../docs/{primitives => components}/input.mdx | 31 +- .../docs/{primitives => components}/label.mdx | 14 + .../{primitives => components}/menubar.mdx | 14 + .../navigation-menu.mdx | 14 + .../{primitives => components}/popover.mdx | 14 + .../{primitives => components}/progress.mdx | 14 + .../radio-group.mdx | 14 + .../scroll-area.mdx | 14 + .../{primitives => components}/select.mdx | 14 + .../{primitives => components}/separator.mdx | 14 + .../docs/{primitives => components}/sheet.mdx | 16 +- apps/www/content/docs/components/skeleton.mdx | 44 + .../{primitives => components}/slider.mdx | 14 + .../{primitives => components}/switch.mdx | 14 + .../docs/{primitives => components}/tabs.mdx | 26 +- .../{primitives => components}/textarea.mdx | 22 +- .../docs/{primitives => components}/toast.mdx | 66 +- .../{primitives => components}/toggle.mdx | 14 + .../{primitives => components}/tooltip.mdx | 14 + .../{primitives => components}/typography.mdx | 6 +- apps/www/content/docs/index.mdx | 89 +- apps/www/content/docs/installation.mdx | 206 +- apps/www/content/docs/theming.mdx | 179 + apps/www/contentlayer.config.js | 19 +- .../www}/hooks/use-mutation-observer.ts | 4 +- apps/www/hooks/use-toast.ts | 189 - apps/www/lib/fonts.ts | 11 + apps/www/lib/themes/dark.json | 380 ++ apps/www/lib/themes/light.json | 380 ++ apps/www/lib/utils.ts | 2 +- apps/www/lib/vscode-theme.json | 733 --- apps/www/next.config.mjs | 26 +- apps/www/package.json | 34 +- apps/www/pages/api/components.json | 116 +- apps/www/public/android-chrome-192x192.png | Bin 8183 -> 3728 bytes apps/www/public/android-chrome-512x512.png | Bin 29961 -> 11829 bytes apps/www/public/apple-touch-icon.png | Bin 7566 -> 3306 bytes apps/www/public/avatars/01.png | Bin 0 -> 13920 bytes apps/www/public/avatars/02.png | Bin 0 -> 15326 bytes apps/www/public/avatars/03.png | Bin 0 -> 14526 bytes apps/www/public/avatars/04.png | Bin 0 -> 14077 bytes apps/www/public/avatars/05.png | Bin 0 -> 14821 bytes .../public/examples/authentication-dark.png | Bin 0 -> 365216 bytes .../public/examples/authentication-light.png | Bin 0 -> 359293 bytes apps/www/public/examples/cards-dark.png | Bin 0 -> 570780 bytes apps/www/public/examples/cards-light.png | Bin 0 -> 493023 bytes apps/www/public/examples/dashboard-dark.png | Bin 0 -> 269323 bytes apps/www/public/examples/dashboard-light.png | Bin 0 -> 232296 bytes apps/www/public/examples/music-dark.png | Bin 0 -> 1197058 bytes apps/www/public/examples/music-light.png | Bin 0 -> 1152343 bytes apps/www/public/examples/playground-dark.png | Bin 0 -> 95239 bytes apps/www/public/examples/playground-light.png | Bin 0 -> 88414 bytes apps/www/public/favicon-16x16.png | Bin 295 -> 360 bytes apps/www/public/favicon-32x32.png | Bin 639 -> 548 bytes apps/www/public/favicon.ico | Bin 15406 -> 15406 bytes apps/www/public/og-2.jpg | Bin 66193 -> 0 bytes apps/www/public/site.webmanifest | 6 +- apps/www/styles/globals.css | 103 + apps/www/styles/mdx.css | 57 +- examples/playground/.editorconfig | 10 - examples/playground/.eslintignore | 5 - examples/playground/.eslintrc.json | 20 - examples/playground/.gitignore | 36 - examples/playground/.prettierignore | 12 - examples/playground/README.md | 7 - examples/playground/app/(auth)/login/page.tsx | 43 - .../playground/app/(auth)/signup/page.tsx | 48 - .../playground/app/(playground)/layout.tsx | 46 - examples/playground/app/(playground)/page.tsx | 140 - examples/playground/app/head.tsx | 43 - examples/playground/app/layout.tsx | 45 - examples/playground/components/analytics.tsx | 7 - examples/playground/components/main-nav.tsx | 105 - .../playground/components/site-footer.tsx | 35 - .../playground/components/site-header.tsx | 54 - .../playground/components/theme-toggle.tsx | 43 - .../playground/components/ui/accordion.tsx | 63 - .../playground/components/ui/alert-dialog.tsx | 156 - .../playground/components/ui/aspect-ratio.tsx | 7 - examples/playground/components/ui/avatar.tsx | 50 - examples/playground/components/ui/button.tsx | 53 - .../playground/components/ui/checkbox.tsx | 30 - .../playground/components/ui/collapsible.tsx | 11 - examples/playground/components/ui/command.tsx | 158 - .../playground/components/ui/context-menu.tsx | 200 - examples/playground/components/ui/dialog.tsx | 130 - .../components/ui/dropdown-menu.tsx | 203 - .../playground/components/ui/hover-card.tsx | 29 - examples/playground/components/ui/input.tsx | 24 - examples/playground/components/ui/label.tsx | 23 - examples/playground/components/ui/menubar.tsx | 236 - .../components/ui/navigation-menu.tsx | 128 - examples/playground/components/ui/popover.tsx | 31 - .../playground/components/ui/progress.tsx | 28 - .../playground/components/ui/radio-group.tsx | 44 - .../playground/components/ui/scroll-area.tsx | 48 - examples/playground/components/ui/select.tsx | 113 - .../playground/components/ui/separator.tsx | 31 - examples/playground/components/ui/sheet.tsx | 234 - examples/playground/components/ui/slider.tsx | 28 - examples/playground/components/ui/switch.tsx | 29 - examples/playground/components/ui/tabs.tsx | 55 - .../playground/components/ui/textarea.tsx | 24 - examples/playground/components/ui/toast.tsx | 128 - examples/playground/components/ui/toaster.tsx | 36 - examples/playground/components/ui/toggle.tsx | 45 - examples/playground/components/ui/tooltip.tsx | 31 - .../playground/components/user-auth-form.tsx | 69 - examples/playground/components/user-nav.tsx | 94 - examples/playground/config/site.ts | 19 - examples/playground/data/examples.ts | 55 - examples/playground/data/teams.tsx | 17 - examples/playground/data/user.ts | 8 - examples/playground/hooks/use-toast.ts | 188 - examples/playground/lib/utils.ts | 6 - examples/playground/next-env.d.ts | 5 - examples/playground/next.config.mjs | 18 - examples/playground/package.json | 74 - examples/playground/pages/.gitkeep | 0 examples/playground/pnpm-lock.yaml | 5343 ----------------- examples/playground/postcss.config.cjs | 1 - examples/playground/prettier.config.cjs | 29 - .../public/android-chrome-192x192.png | Bin 8183 -> 0 bytes .../public/android-chrome-512x512.png | Bin 29961 -> 0 bytes .../playground/public/apple-touch-icon.png | Bin 7566 -> 0 bytes examples/playground/public/favicon-16x16.png | Bin 295 -> 0 bytes examples/playground/public/favicon-32x32.png | Bin 639 -> 0 bytes examples/playground/public/favicon.ico | Bin 15406 -> 0 bytes examples/playground/public/og.jpg | Bin 329210 -> 0 bytes examples/playground/public/site.webmanifest | 19 - examples/playground/styles/globals.css | 3 - examples/playground/tailwind.config.cjs | 7 - examples/playground/tsconfig.json | 28 - examples/playground/types/index.ts | 33 - package.json | 34 +- packages/cli/package.json | 1 + pnpm-lock.yaml | 2441 ++++---- pnpm-workspace.yaml | 1 - prettier.config.cjs | 6 +- tailwind.config.cjs | 46 +- templates/next-template/.eslintrc.json | 14 +- .../next-template}/.vscode/settings.json | 2 +- templates/next-template/README.md | 71 +- templates/next-template/app/layout.tsx | 54 + templates/next-template/app/page.tsx | 39 + templates/next-template/components/icons.tsx | 1 - .../next-template/components/main-nav.tsx | 42 +- .../next-template/components/site-header.tsx | 6 +- .../components/tailwind-indicator.tsx | 0 .../components/theme-provider.tsx | 0 .../next-template/components/theme-toggle.tsx | 44 +- .../next-template/components/ui/accordion.tsx | 63 - .../components/ui/alert-dialog.tsx | 156 - .../components/ui/aspect-ratio.tsx | 7 - .../next-template/components/ui/avatar.tsx | 50 - .../next-template/components/ui/button.tsx | 20 +- .../next-template/components/ui/checkbox.tsx | 30 - .../components/ui/collapsible.tsx | 11 - .../next-template/components/ui/command.tsx | 158 - .../components/ui/context-menu.tsx | 200 - .../next-template/components/ui/dialog.tsx | 130 - .../components/ui/dropdown-menu.tsx | 203 - .../components/ui/hover-card.tsx | 29 - .../next-template/components/ui/input.tsx | 24 - .../next-template/components/ui/label.tsx | 23 - .../next-template/components/ui/menubar.tsx | 236 - .../components/ui/navigation-menu.tsx | 128 - .../next-template/components/ui/popover.tsx | 31 - .../next-template/components/ui/progress.tsx | 28 - .../components/ui/radio-group.tsx | 44 - .../components/ui/scroll-area.tsx | 48 - .../next-template/components/ui/select.tsx | 113 - .../next-template/components/ui/separator.tsx | 31 - .../next-template/components/ui/sheet.tsx | 234 - .../next-template/components/ui/slider.tsx | 28 - .../next-template/components/ui/switch.tsx | 29 - .../next-template/components/ui/tabs.tsx | 55 - .../next-template/components/ui/textarea.tsx | 24 - .../next-template/components/ui/toast.tsx | 128 - .../next-template/components/ui/toaster.tsx | 36 - .../next-template/components/ui/toggle.tsx | 45 - .../next-template/components/ui/tooltip.tsx | 31 - templates/next-template/config/site.ts | 15 +- templates/next-template/hooks/use-toast.ts | 188 - templates/next-template/lib/fonts.ts | 11 + templates/next-template/lib/utils.ts | 2 +- templates/next-template/next.config.mjs | 7 +- templates/next-template/package.json | 46 +- templates/next-template/pages/_app.tsx | 26 - templates/next-template/pages/_document.tsx | 13 - templates/next-template/pages/index.tsx | 52 - templates/next-template/prettier.config.js | 4 + templates/next-template/styles/globals.css | 78 + templates/next-template/tailwind.config.js | 46 +- templates/next-template/tsconfig.json | 10 +- turbo.json | 8 + 395 files changed, 8873 insertions(+), 16057 deletions(-) delete mode 100644 apps/www/app/docs/[[...slug]]/head.tsx create mode 100644 apps/www/app/examples/authentication/components/user-auth-form.tsx create mode 100644 apps/www/app/examples/authentication/page.tsx create mode 100644 apps/www/app/examples/cards/components/cookie-settings.tsx create mode 100644 apps/www/app/examples/cards/components/create-account.tsx create mode 100644 apps/www/app/examples/cards/components/date-picker.tsx create mode 100644 apps/www/app/examples/cards/components/github-card.tsx create mode 100644 apps/www/app/examples/cards/components/notifications.tsx create mode 100644 apps/www/app/examples/cards/components/payment-method.tsx create mode 100644 apps/www/app/examples/cards/components/report-an-issue.tsx create mode 100644 apps/www/app/examples/cards/components/share-document.tsx create mode 100644 apps/www/app/examples/cards/components/team-members.tsx create mode 100644 apps/www/app/examples/cards/page.tsx create mode 100644 apps/www/app/examples/cards/styles.css create mode 100644 apps/www/app/examples/dashboard/components/date-range-picker.tsx create mode 100644 apps/www/app/examples/dashboard/components/main-nav.tsx create mode 100644 apps/www/app/examples/dashboard/components/overview.tsx create mode 100644 apps/www/app/examples/dashboard/components/recent-sales.tsx create mode 100644 apps/www/app/examples/dashboard/components/search.tsx create mode 100644 apps/www/app/examples/dashboard/components/team-switcher.tsx create mode 100644 apps/www/app/examples/dashboard/components/user-nav.tsx create mode 100644 apps/www/app/examples/dashboard/page.tsx create mode 100644 apps/www/app/examples/layout.tsx create mode 100644 apps/www/app/examples/music/components/album-artwork.tsx create mode 100644 apps/www/app/examples/music/components/menu.tsx create mode 100644 apps/www/app/examples/music/components/podcast-empty-placeholder.tsx create mode 100644 apps/www/app/examples/music/components/sidebar.tsx create mode 100644 apps/www/app/examples/music/data/albums.ts create mode 100644 apps/www/app/examples/music/data/playlists.ts create mode 100644 apps/www/app/examples/music/page.tsx create mode 100644 apps/www/app/examples/music/styles.css rename {examples => apps/www/app/examples}/playground/components/code-viewer.tsx (92%) rename {examples => apps/www/app/examples}/playground/components/icons.tsx (99%) rename {examples => apps/www/app/examples}/playground/components/maxlength-selector.tsx (92%) rename {examples => apps/www/app/examples}/playground/components/model-selector.tsx (90%) rename {examples => apps/www/app/examples}/playground/components/preset-actions.tsx (92%) rename {examples => apps/www/app/examples}/playground/components/preset-save.tsx (95%) rename {examples => apps/www/app/examples}/playground/components/preset-selector.tsx (95%) rename {examples => apps/www/app/examples}/playground/components/preset-share.tsx (71%) rename {examples => apps/www/app/examples}/playground/components/temperature-selector.tsx (92%) rename {examples => apps/www/app/examples}/playground/components/top-p-selector.tsx (92%) rename {examples => apps/www/app/examples}/playground/data/models.ts (94%) rename {examples => apps/www/app/examples}/playground/data/presets.ts (94%) create mode 100644 apps/www/app/examples/playground/page.tsx create mode 100644 apps/www/app/examples/playground/styles.css delete mode 100644 apps/www/app/head.tsx create mode 100644 apps/www/app/sink/page.tsx create mode 100644 apps/www/assets/fonts/CalSans-SemiBold.ttf create mode 100644 apps/www/assets/fonts/CalSans-SemiBold.woff create mode 100644 apps/www/assets/fonts/CalSans-SemiBold.woff2 delete mode 100644 apps/www/components/apple-music-demo.tsx delete mode 100644 apps/www/components/card.tsx create mode 100644 apps/www/components/examples-nav.tsx create mode 100644 apps/www/components/examples/alert/demo.tsx create mode 100644 apps/www/components/examples/alert/destructive.tsx create mode 100644 apps/www/components/examples/badge/demo.tsx create mode 100644 apps/www/components/examples/badge/destructive.tsx create mode 100644 apps/www/components/examples/badge/outline.tsx create mode 100644 apps/www/components/examples/badge/secondary.tsx create mode 100644 apps/www/components/examples/button/secondary.tsx delete mode 100644 apps/www/components/examples/button/subtle.tsx create mode 100644 apps/www/components/examples/calendar/date-picker.tsx create mode 100644 apps/www/components/examples/calendar/date-range-picker.tsx create mode 100644 apps/www/components/examples/calendar/demo.tsx create mode 100644 apps/www/components/examples/calendar/with-presets.tsx create mode 100644 apps/www/components/examples/card/demo.tsx create mode 100644 apps/www/components/examples/card/with-form.tsx create mode 100644 apps/www/components/examples/input/file.tsx create mode 100644 apps/www/components/examples/skeleton/demo.tsx create mode 100644 apps/www/components/examples/typography/muted.tsx delete mode 100644 apps/www/components/examples/typography/subtle.tsx delete mode 100644 apps/www/components/fonts.tsx rename apps/www/components/{mdx.tsx => mdx-components.tsx} (71%) delete mode 100644 apps/www/components/mdx-head.tsx create mode 100644 apps/www/components/style-switcher.tsx create mode 100644 apps/www/components/ui/alert.tsx create mode 100644 apps/www/components/ui/badge.tsx create mode 100644 apps/www/components/ui/calendar.tsx create mode 100644 apps/www/components/ui/card.tsx create mode 100644 apps/www/components/ui/skeleton.tsx create mode 100644 apps/www/content/docs/cli.mdx rename apps/www/content/docs/{primitives => components}/accordion.mdx (54%) rename apps/www/content/docs/{primitives => components}/alert-dialog.mdx (86%) create mode 100644 apps/www/content/docs/components/alert.mdx rename apps/www/content/docs/{primitives => components}/aspect-ratio.mdx (77%) rename apps/www/content/docs/{primitives => components}/avatar.mdx (78%) create mode 100644 apps/www/content/docs/components/badge.mdx rename apps/www/content/docs/{primitives => components}/button.mdx (70%) create mode 100644 apps/www/content/docs/components/calendar.mdx create mode 100644 apps/www/content/docs/components/card.mdx rename apps/www/content/docs/{primitives => components}/checkbox.mdx (80%) rename apps/www/content/docs/{primitives => components}/collapsible.mdx (81%) rename apps/www/content/docs/{primitives => components}/command.mdx (87%) rename apps/www/content/docs/{primitives => components}/context-menu.mdx (82%) rename apps/www/content/docs/{primitives => components}/dialog.mdx (79%) rename apps/www/content/docs/{primitives => components}/dropdown-menu.mdx (86%) rename apps/www/content/docs/{primitives => components}/hover-card.mdx (75%) rename apps/www/content/docs/{primitives => components}/input.mdx (73%) rename apps/www/content/docs/{primitives => components}/label.mdx (76%) rename apps/www/content/docs/{primitives => components}/menubar.mdx (84%) rename apps/www/content/docs/{primitives => components}/navigation-menu.mdx (88%) rename apps/www/content/docs/{primitives => components}/popover.mdx (78%) rename apps/www/content/docs/{primitives => components}/progress.mdx (77%) rename apps/www/content/docs/{primitives => components}/radio-group.mdx (83%) rename apps/www/content/docs/{primitives => components}/scroll-area.mdx (83%) rename apps/www/content/docs/{primitives => components}/select.mdx (81%) rename apps/www/content/docs/{primitives => components}/separator.mdx (76%) rename apps/www/content/docs/{primitives => components}/sheet.mdx (82%) create mode 100644 apps/www/content/docs/components/skeleton.mdx rename apps/www/content/docs/{primitives => components}/slider.mdx (76%) rename apps/www/content/docs/{primitives => components}/switch.mdx (75%) rename apps/www/content/docs/{primitives => components}/tabs.mdx (71%) rename apps/www/content/docs/{primitives => components}/textarea.mdx (77%) rename apps/www/content/docs/{primitives => components}/toast.mdx (71%) rename apps/www/content/docs/{primitives => components}/toggle.mdx (85%) rename apps/www/content/docs/{primitives => components}/tooltip.mdx (80%) rename apps/www/content/docs/{primitives => components}/typography.mdx (95%) create mode 100644 apps/www/content/docs/theming.mdx rename {examples/playground => apps/www}/hooks/use-mutation-observer.ts (83%) delete mode 100644 apps/www/hooks/use-toast.ts create mode 100644 apps/www/lib/fonts.ts create mode 100644 apps/www/lib/themes/dark.json create mode 100644 apps/www/lib/themes/light.json delete mode 100644 apps/www/lib/vscode-theme.json create mode 100644 apps/www/public/avatars/01.png create mode 100644 apps/www/public/avatars/02.png create mode 100644 apps/www/public/avatars/03.png create mode 100644 apps/www/public/avatars/04.png create mode 100644 apps/www/public/avatars/05.png create mode 100644 apps/www/public/examples/authentication-dark.png create mode 100644 apps/www/public/examples/authentication-light.png create mode 100644 apps/www/public/examples/cards-dark.png create mode 100644 apps/www/public/examples/cards-light.png create mode 100644 apps/www/public/examples/dashboard-dark.png create mode 100644 apps/www/public/examples/dashboard-light.png create mode 100644 apps/www/public/examples/music-dark.png create mode 100644 apps/www/public/examples/music-light.png create mode 100644 apps/www/public/examples/playground-dark.png create mode 100644 apps/www/public/examples/playground-light.png delete mode 100644 apps/www/public/og-2.jpg delete mode 100644 examples/playground/.editorconfig delete mode 100644 examples/playground/.eslintignore delete mode 100644 examples/playground/.eslintrc.json delete mode 100644 examples/playground/.gitignore delete mode 100644 examples/playground/.prettierignore delete mode 100644 examples/playground/README.md delete mode 100644 examples/playground/app/(auth)/login/page.tsx delete mode 100644 examples/playground/app/(auth)/signup/page.tsx delete mode 100644 examples/playground/app/(playground)/layout.tsx delete mode 100644 examples/playground/app/(playground)/page.tsx delete mode 100644 examples/playground/app/head.tsx delete mode 100644 examples/playground/app/layout.tsx delete mode 100644 examples/playground/components/analytics.tsx delete mode 100644 examples/playground/components/main-nav.tsx delete mode 100644 examples/playground/components/site-footer.tsx delete mode 100644 examples/playground/components/site-header.tsx delete mode 100644 examples/playground/components/theme-toggle.tsx delete mode 100644 examples/playground/components/ui/accordion.tsx delete mode 100644 examples/playground/components/ui/alert-dialog.tsx delete mode 100644 examples/playground/components/ui/aspect-ratio.tsx delete mode 100644 examples/playground/components/ui/avatar.tsx delete mode 100644 examples/playground/components/ui/button.tsx delete mode 100644 examples/playground/components/ui/checkbox.tsx delete mode 100644 examples/playground/components/ui/collapsible.tsx delete mode 100644 examples/playground/components/ui/command.tsx delete mode 100644 examples/playground/components/ui/context-menu.tsx delete mode 100644 examples/playground/components/ui/dialog.tsx delete mode 100644 examples/playground/components/ui/dropdown-menu.tsx delete mode 100644 examples/playground/components/ui/hover-card.tsx delete mode 100644 examples/playground/components/ui/input.tsx delete mode 100644 examples/playground/components/ui/label.tsx delete mode 100644 examples/playground/components/ui/menubar.tsx delete mode 100644 examples/playground/components/ui/navigation-menu.tsx delete mode 100644 examples/playground/components/ui/popover.tsx delete mode 100644 examples/playground/components/ui/progress.tsx delete mode 100644 examples/playground/components/ui/radio-group.tsx delete mode 100644 examples/playground/components/ui/scroll-area.tsx delete mode 100644 examples/playground/components/ui/select.tsx delete mode 100644 examples/playground/components/ui/separator.tsx delete mode 100644 examples/playground/components/ui/sheet.tsx delete mode 100644 examples/playground/components/ui/slider.tsx delete mode 100644 examples/playground/components/ui/switch.tsx delete mode 100644 examples/playground/components/ui/tabs.tsx delete mode 100644 examples/playground/components/ui/textarea.tsx delete mode 100644 examples/playground/components/ui/toast.tsx delete mode 100644 examples/playground/components/ui/toaster.tsx delete mode 100644 examples/playground/components/ui/toggle.tsx delete mode 100644 examples/playground/components/ui/tooltip.tsx delete mode 100644 examples/playground/components/user-auth-form.tsx delete mode 100644 examples/playground/components/user-nav.tsx delete mode 100644 examples/playground/config/site.ts delete mode 100644 examples/playground/data/examples.ts delete mode 100644 examples/playground/data/teams.tsx delete mode 100644 examples/playground/data/user.ts delete mode 100644 examples/playground/hooks/use-toast.ts delete mode 100644 examples/playground/lib/utils.ts delete mode 100644 examples/playground/next-env.d.ts delete mode 100644 examples/playground/next.config.mjs delete mode 100644 examples/playground/package.json delete mode 100644 examples/playground/pages/.gitkeep delete mode 100644 examples/playground/pnpm-lock.yaml delete mode 100644 examples/playground/postcss.config.cjs delete mode 100644 examples/playground/prettier.config.cjs delete mode 100644 examples/playground/public/android-chrome-192x192.png delete mode 100644 examples/playground/public/android-chrome-512x512.png delete mode 100644 examples/playground/public/apple-touch-icon.png delete mode 100644 examples/playground/public/favicon-16x16.png delete mode 100644 examples/playground/public/favicon-32x32.png delete mode 100644 examples/playground/public/favicon.ico delete mode 100644 examples/playground/public/og.jpg delete mode 100644 examples/playground/public/site.webmanifest delete mode 100644 examples/playground/styles/globals.css delete mode 100644 examples/playground/tailwind.config.cjs delete mode 100644 examples/playground/tsconfig.json delete mode 100644 examples/playground/types/index.ts rename {examples/playground => templates/next-template}/.vscode/settings.json (56%) create mode 100644 templates/next-template/app/layout.tsx create mode 100644 templates/next-template/app/page.tsx rename {examples/playground => templates/next-template}/components/tailwind-indicator.tsx (100%) rename {examples/playground => templates/next-template}/components/theme-provider.tsx (100%) delete mode 100644 templates/next-template/components/ui/accordion.tsx delete mode 100644 templates/next-template/components/ui/alert-dialog.tsx delete mode 100644 templates/next-template/components/ui/aspect-ratio.tsx delete mode 100644 templates/next-template/components/ui/avatar.tsx delete mode 100644 templates/next-template/components/ui/checkbox.tsx delete mode 100644 templates/next-template/components/ui/collapsible.tsx delete mode 100644 templates/next-template/components/ui/command.tsx delete mode 100644 templates/next-template/components/ui/context-menu.tsx delete mode 100644 templates/next-template/components/ui/dialog.tsx delete mode 100644 templates/next-template/components/ui/dropdown-menu.tsx delete mode 100644 templates/next-template/components/ui/hover-card.tsx delete mode 100644 templates/next-template/components/ui/input.tsx delete mode 100644 templates/next-template/components/ui/label.tsx delete mode 100644 templates/next-template/components/ui/menubar.tsx delete mode 100644 templates/next-template/components/ui/navigation-menu.tsx delete mode 100644 templates/next-template/components/ui/popover.tsx delete mode 100644 templates/next-template/components/ui/progress.tsx delete mode 100644 templates/next-template/components/ui/radio-group.tsx delete mode 100644 templates/next-template/components/ui/scroll-area.tsx delete mode 100644 templates/next-template/components/ui/select.tsx delete mode 100644 templates/next-template/components/ui/separator.tsx delete mode 100644 templates/next-template/components/ui/sheet.tsx delete mode 100644 templates/next-template/components/ui/slider.tsx delete mode 100644 templates/next-template/components/ui/switch.tsx delete mode 100644 templates/next-template/components/ui/tabs.tsx delete mode 100644 templates/next-template/components/ui/textarea.tsx delete mode 100644 templates/next-template/components/ui/toast.tsx delete mode 100644 templates/next-template/components/ui/toaster.tsx delete mode 100644 templates/next-template/components/ui/toggle.tsx delete mode 100644 templates/next-template/components/ui/tooltip.tsx delete mode 100644 templates/next-template/hooks/use-toast.ts create mode 100644 templates/next-template/lib/fonts.ts delete mode 100644 templates/next-template/pages/_app.tsx delete mode 100644 templates/next-template/pages/_document.tsx delete mode 100644 templates/next-template/pages/index.tsx diff --git a/.changeset/config.json b/.changeset/config.json index abe15f5fd58..18ab50bc761 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -1,6 +1,6 @@ { "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json", - "changelog": ["@changesets/changelog-github", { "repo": "shadcn/ui" }], + "changelog": ["@changesets/changelog-github", { "repo": "shadcn-ui" }], "commit": false, "fixed": [], "linked": [], diff --git a/.eslintrc.json b/.eslintrc.json index d58b7822f37..920b86f3445 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -16,10 +16,17 @@ }, "settings": { "tailwindcss": { - "callees": ["cn"] + "callees": ["cn"], + "config": "tailwind.config.cjs" }, "next": { "rootDir": ["apps/*/"] } - } + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "parser": "@typescript-eslint/parser" + } + ] } diff --git a/README.md b/README.md index 66babcd5c71..28e10396fa6 100644 --- a/README.md +++ b/README.md @@ -4,42 +4,9 @@ Accessible and customizable components that you can copy and paste into your app ![hero](apps/www/public/og.jpg) -## Roadmap +## Documentation -> **Warning** -> This is work in progress. I'm building this in public. You can follow the progress on Twitter [@shadcn](https://twitter.com/shadcn). - -- [ ] Toggle Group -- [ ] Toolbar -- [x] ~Toast~ -- [x] ~Toggle~ -- [x] ~Navigation Menu~ -- [x] ~Figma~ - -## Get Started - -Starting a new project? Check out the Next.js template. - -```bash -npx create-next-app -e https://github.com/shadcn/next-template -``` - -### Features - -- Radix UI Primitives -- Tailwind CSS -- Fonts with `@next/font` -- Icons from [Lucide](https://lucide.dev) -- Dark mode with `next-themes` -- Automatic import sorting with `@ianvs/prettier-plugin-sort-imports` - -### Tailwind CSS Features - -- Class merging with `tailwind-merge` -- Animation with `tailwindcss-animate` -- Conditional classes with `clsx` -- Variants with `class-variance-authority` -- Automatic class sorting with `eslint-plugin-tailwindcss` +Visit http://ui.shadcn.com/docs to view the documentation. ## License diff --git a/apps/www/.env.example b/apps/www/.env.example index 66fa3666970..9ea50f4d73a 100644 --- a/apps/www/.env.example +++ b/apps/www/.env.example @@ -1,4 +1,4 @@ # ----------------------------------------------------------------------------- # App # ----------------------------------------------------------------------------- -NEXT_PUBLIC_APP_URL=http://localhost:3000 \ No newline at end of file +NEXT_PUBLIC_APP_URL=http://localhost:3001 diff --git a/apps/www/app/docs/[[...slug]]/head.tsx b/apps/www/app/docs/[[...slug]]/head.tsx deleted file mode 100644 index 1516c7f9d02..00000000000 --- a/apps/www/app/docs/[[...slug]]/head.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { allDocs } from "contentlayer/generated" - -import MdxHead from "@/components/mdx-head" - -interface HeadProps { - params: { - slug: string[] - } -} - -export default function Head({ params }: HeadProps) { - const slug = params?.slug?.join("/") || "" - const doc = allDocs.find((doc) => doc.slugAsParams === slug) - - if (!doc) { - return null - } - - return ( - - ) -} diff --git a/apps/www/app/docs/[[...slug]]/page.tsx b/apps/www/app/docs/[[...slug]]/page.tsx index c08aa2f2561..8b18a02ef7c 100644 --- a/apps/www/app/docs/[[...slug]]/page.tsx +++ b/apps/www/app/docs/[[...slug]]/page.tsx @@ -2,15 +2,20 @@ import { notFound } from "next/navigation" import { allDocs } from "contentlayer/generated" import "@/styles/mdx.css" +import type { Metadata } from "next" import Link from "next/link" +import { ChevronRight } from "lucide-react" +import Balancer from "react-wrap-balancer" +import { siteConfig } from "@/config/site" import { getTableOfContents } from "@/lib/toc" +import { absoluteUrl, cn } from "@/lib/utils" +import { badgeVariants } from "@/components/ui/badge" +import { Separator } from "@/components/ui/separator" import { Icons } from "@/components/icons" -import { Mdx } from "@/components/mdx" -import { DocsPageHeader } from "@/components/page-header" +import { Mdx } from "@/components/mdx-components" import { DocsPager } from "@/components/pager" import { DashboardTableOfContents } from "@/components/toc" -import { Separator } from "@/components/ui/separator" interface DocPageProps { params: { @@ -18,6 +23,53 @@ interface DocPageProps { } } +async function getDocFromParams({ params }: DocPageProps) { + const slug = params.slug?.join("/") || "" + const doc = allDocs.find((doc) => doc.slugAsParams === slug) + + if (!doc) { + null + } + + return doc +} + +export async function generateMetadata({ + params, +}: DocPageProps): Promise { + const doc = await getDocFromParams({ params }) + + if (!doc) { + return {} + } + + return { + title: doc.title, + description: doc.description, + openGraph: { + title: doc.title, + description: doc.description, + type: "article", + url: absoluteUrl(doc.slug), + images: [ + { + url: siteConfig.ogImage, + width: 1200, + height: 630, + alt: siteConfig.name, + }, + ], + }, + twitter: { + card: "summary_large_image", + title: doc.title, + description: doc.description, + images: [siteConfig.ogImage], + creator: "@shadcn", + }, + } +} + export async function generateStaticParams(): Promise< DocPageProps["params"][] > { @@ -27,8 +79,7 @@ export async function generateStaticParams(): Promise< } export default async function DocPage({ params }: DocPageProps) { - const slug = params?.slug?.join("/") || "" - const doc = allDocs.find((doc) => doc.slugAsParams === slug) + const doc = await getDocFromParams({ params }) if (!doc) { notFound() @@ -37,41 +88,57 @@ export default async function DocPage({ params }: DocPageProps) { const toc = await getTableOfContents(doc.body.raw) return ( -
+
- - {doc.radix ? ( -
- {doc.radix?.link && ( - - - Radix UI - - )} - {doc.radix?.api && ( - - API Reference - - )} -
- ) : null} - +
+
+ Docs +
+ +
{doc.title}
+
+
+

+ {doc.title} +

+ {doc.description && ( +

+ {doc.description} +

+ )} +
+ {doc.radix ? ( +
+ {doc.radix?.link && ( + + + Radix UI + + )} + {doc.radix?.api && ( + + API Reference + + )} +
+ ) : null} +
-
+
diff --git a/apps/www/app/docs/layout.tsx b/apps/www/app/docs/layout.tsx index f134972faa7..5d5a5495a25 100644 --- a/apps/www/app/docs/layout.tsx +++ b/apps/www/app/docs/layout.tsx @@ -8,9 +8,9 @@ interface DocsLayoutProps { export default function DocsLayout({ children }: DocsLayoutProps) { return ( -
-