Next.js Discord

Discord Forum

I need help with shadcn/ui

Unanswered
Sun bear posted this in #help-forum
Open in Discord
Sun bearOP
I don't have the same styles

31 Replies

Jboncz
You gotta show some code 😄
Sun bearOP
import { Button } from "@/components/ui/button";

export default function Chat() {
    return (
        <Button>Send</Button>
    );
}
Jboncz
Thats normal though. Whats the issue?
Sun bearOP
I think I've misunderstood the purpose of the library. Do we need to stylize (perhaps in terms of colors only) our components or do they arrive completely stylized?
Jboncz
<Button variant='secondary'>Test</Button>
There are some defaults.
const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap 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",
  {
    variants: {
      variant: {
        default:
          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
        outline:
          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-9 px-4 py-2",
        sm: "h-8 rounded-md px-3 text-xs",
        lg: "h-10 rounded-md px-8",
        icon: "h-9 w-9",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)
https://ui.shadcn.com/docs/components/button if you scroll it shows you all the default variations it offers
Sun bearOP
Okay, so I modify the component to suit my design and reuse it whenever I want, right?
Jboncz
Yep
IT just provides a very basic styling.
The rest is up to you
Sun bearOP
Oh right, I thought everything was perfect and that all I had to do was import the elements and use them.
Jboncz
I mean they are perfect if you want to use their style decisions
Sun bearOP
I see. Thank you so much for your help
Jboncz
<Button className="relative overflow-hidden bg-gradient-to-r from-pink-400 to-pink-600 text-white hover:text-white">
      <span className="relative z-10">Gradient Button</span>
      <div className="absolute inset-0 bg-gradient-to-r from-pink-300 via-pink-500 to-pink-300 bg-[length:200%_100%] animate-gradient-x" />
    </Button>
this makes a moving gradiant button
function Component() {
  const [exploded, setExploded] = useState(false)

  const handleExplode = () => {
    setExploded(true)
    // Optional: Reset the explosion after a delay
    // setTimeout(() => setExploded(false), 1000)
  }

  if (exploded) {
    return (
      <div className="relative w-32 h-12">
        {[...Array(20)].map((_, i) => (
          <div
            key={i}
            className="absolute left-1/2 top-1/2 w-2 h-2 bg-pink-500 rounded-full animate-explode"
            style={{
              '--angle': `${i * 18}deg`,
              '--delay': `${Math.random() * 0.1}s`,
            } as React.CSSProperties}
          />
        ))}
      </div>
    )
  }

  return (
    <Button
      className="relative overflow-hidden bg-gradient-to-r from-pink-400 to-pink-600 text-white hover:text-white"
      onClick={handleExplode}
    >
      <span className="relative z-10">Exploding Button</span>
      <div className="absolute inset-0 bg-gradient-to-r from-pink-300 via-pink-500 to-pink-300 bg-[length:200%_100%] animate-gradient-x" />
    </Button>
  )
}


@keyframes gradient-x {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-gradient-x {
  animation: gradient-x 15s linear infinite;
}

@keyframes explode {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translate(calc(cos(var(--angle)) * 100px), calc(sin(var(--angle)) * 100px)) scale(1);
    opacity: 0;
  }
}

.animate-explode {
  animation: explode 0.5s ease-out forwards;
  animation-delay: var(--delay, 0s);
}
this makes an exploding button when you click it
lol
Sun bearOP
Haha
How can I change the primary color?
I don't find
Jboncz
<Button className="bg-red-500">Red Button</Button>
@Jboncz <Button className="bg-red-500">Red Button</Button>
Sun bearOP
I'm not just talking about this button, but for all the components I'm going to use in my project
Jboncz
Okay so that would be in your tailwind file tou can change the base themes
I’m about to pass out I’ll try to help in the morning.
Asian black bear
There is a whole section for theming in the docs: https://ui.shadcn.com/docs/theming
Also in the future when you open threads in here, please consider the following