This command will create a screen.css file in your ./src directory.
This file adds the "pixel-like" scan lines and the flickering effect, dont import it if yo don't like it. If you want to avoid the single component screen or flickering effect and prefer to set it to the whole page incliding the background just delete all .screen and .flicker in CSS and use screen-containter in your html body. If you are using Nextjs move the file to the ./app folder. I'll take take of that in the next versions.
This will replace your default shadcn components! Back them up or move them to another folder
Use the following theme to make the components look like in this page
.terminal {
--background: 195, 23.08%, 10.2%;
--foreground: 180 100% 100%;
--muted: 28 27% 13%;
--muted-foreground: 109.41 8% 80.59%;
--popover: 208 32% 3%;
--popover-foreground: 208 12% 100%;
--card: 195, 23.08%, 10.2%;
--card-foreground: 109.41 51.52% 80.59%;
--border: 207.56 74.14% 54.51%;
--input: 208 14% 15%;
--primary: 109.41 51.52% 80.59%;
--primary-foreground: 0 0% 0%;
--secondary: 204.69 96.97% 61.18%;
--secondary-foreground: 0 0% 100%;
--accent: 28 66% 44%;
--accent-foreground: 0 0% 100%;
--destructive: 8.22 61.86% 53.73%;
--destructive-foreground: 0 0% 100%;
--ring: 109.41 51.52% 80.59%;
--chart-1: 208 66% 44%;
--chart-2: 28 66% 44%;
--chart-3: 28 66% 44%;
--chart-4: 28 66% 47%;
--chart-5: 208 69% 44%;
--radius: 0.2rem;
}