Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Set up ShadCN-UI #164

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

feat: Set up ShadCN-UI #164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bf2fa5f
Set up ShadCN.
chadstewart Sep 19, 2023
424a266
Replacing some css that shadcn-ui deleted when setting up styles.css
chadstewart Sep 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions components.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "tailwind.config.js",
"css": "src/styles/globals.css",
"baseColor": "slate",
"cssVariables": false
},
"aliases": {
"components": "components",
"utils": "lib/utils/utils"
}
}
142 changes: 134 additions & 8 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 5 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,10 @@
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@sendgrid/mail": "^7.7.0",
"class-variance-authority": "^0.7.0",
"clsx": "^2.0.0",
"framer-motion": "^6.5.1",
"lucide-react": "^0.279.0",
"next": "^13.2.4",
"next-sitemap": "^3.1.29",
"posthog-js": "^1.33.0",
Expand All @@ -32,6 +35,8 @@
"react-twitter-embed": "^4.0.4",
"sharp": "^0.32.0",
"storybook-addon-next": "^1.8.0",
"tailwind-merge": "^1.14.0",
"tailwindcss-animate": "^1.0.7",
"zod": "^3.21.4"
},
"devDependencies": {
Expand Down
6 changes: 6 additions & 0 deletions src/lib/utils/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
60 changes: 28 additions & 32 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,36 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: [
"./src/pages/**/*.{js,ts,jsx,tsx}",
"./src/components/**/*.{js,ts,jsx,tsx}"
],
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
'./src/**/*.{ts,tsx}',
],
theme: {
extend: {
spacing: {
"max-screen-size": "1920px"
},
gridTemplateColumns: {
autodesktop: "repeat(auto-fit, minmax(410px, 1fr))",
automobile: "repeat(auto-fit, minmax(300px, 1fr))"
},
container: {
center: true,
padding: "2rem",
screens: {
xs: "425px",
// => @media (min-width: 425px) { ... }
"2xl": "1440px",
// => @media (min-width: 1440px) { ... }
"3xl": "1920px",
// => @media (min-width: 1920px) { ... }
"pass-max-screen": "1921px"
// => @media (min-width: 1921px) { ... }
Comment on lines -17 to -24
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems like the screen breakpoints were overridden. I didn't see any use of xs breakpoint but there are some components that use the 2xl, 3xl and pass-max-screen breakpoints

"2xl": "1400px",
},
},
extend: {
keyframes: {
"accordion-down": {
from: { height: 0 },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: 0 },
},
},
fontFamily: {
inter: ["Inter", "sans-serif"]
Comment on lines -26 to -27
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if this matters but before the implementation of ShadCN UI, the text used for the website was the default font established by the browser and not the Inter font. So visually there's no change font-wise across the site, but maybe it might be good to use the Inter font with NextJS so that you can use next/font across the website: https://nextjs.org/docs/pages/api-reference/components/font

animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
colors: {
primary: "#165C9C",
secondary: "#101828",
gray: "#667085",
dark: "#000000",
altDark: "#222222",
altWhite: "#F0F0F0"
}
Comment on lines -29 to -36
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Colors were also overridden and there are some elements that utilize colors for text

}
},
},
plugins: []
};
plugins: [require("tailwindcss-animate")],
}