Texture Button

A button with layered texture gradients, multiple variants (primary, accent, destructive, secondary, minimal, icon), and dark mode support.

button texture gradient variants

"use client"

import { TextureButton } from "@/components/vritti/texture-button"

export function TextureButtonExample() {
  return (
    <div className="flex flex-col items-center justify-center gap-4 p-8 max-w-xs mx-auto">
      <TextureButton variant="primary">Primary</TextureButton>
      <TextureButton variant="accent">Accent</TextureButton>
      <TextureButton variant="destructive">Destructive</TextureButton>
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/texture-button"

Dependencies


pnpm add @radix-ui/react-slot class-variance-authority

Examples

Variants

"use client"

import { TextureButton } from "@/components/vritti/texture-button"

export function TextureButtonVariantsExample() {
  return (
    <div className="flex flex-col items-center justify-center gap-4 p-8 max-w-xs mx-auto">
      <TextureButton variant="secondary">Secondary</TextureButton>
      <TextureButton variant="minimal">Minimal</TextureButton>
      <TextureButton variant="primary" size="sm">Small</TextureButton>
      <TextureButton variant="primary" size="lg">Large</TextureButton>
    </div>
  )
}

"use client"

import { TextureButton } from "@/components/vritti/texture-button"

export function TextureButtonVariantsExample() {
  return (
    <div className="flex flex-col items-center justify-center gap-4 p-8 max-w-xs mx-auto">
      <TextureButton variant="secondary">Secondary</TextureButton>
      <TextureButton variant="minimal">Minimal</TextureButton>
      <TextureButton variant="primary" size="sm">Small</TextureButton>
      <TextureButton variant="primary" size="lg">Large</TextureButton>
    </div>
  )
}