PParable
All components

Texture Button

Interactive

A tactile button built from stacked surface layers — a gradient face, inlined grayscale noise grain, a soft top-inner sheen, and a composed inset+drop shadow that sinks on press — in accent, surface, and glass variants. The press transform is dropped under prefers-reduced-motion while the pressed colour/shadow still fires, and the focus-visible ring is an outline sitting outside the button.

Inspired by Cult UI — Texture / Border-Beam buttons (free, MIT) — independently built, not affiliated. Attribution policy

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/texture-button.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/texture-button.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="flex flex-col items-center gap-4">
    <TextureButton variant="accent">
      <Sparkles className="size-4" /> Get Parable
    </TextureButton>
    <div className="flex flex-wrap items-center justify-center gap-3">
      <TextureButton variant="surface">
        <Download className="size-4" /> Install
      </TextureButton>
      <TextureButton variant="glass">
        Docs <ArrowRight className="size-4" />
      </TextureButton>
    </div>
  </div>

Props

TextureButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>

PropTypeDefaultDescription
variantTextureButtonVariant"accent"Surface treatment. `"accent"` = violet gradient face (default), `"surface"` = ink face with a hairline border, `"glass"` = translucent face with a backdrop blur.
asReact.ElementType—Render as a different element for navigation semantics — e.g. an `<a>` or a router `Link`. Defaults to `"button"`. Pass `href` alongside for links.
hrefstring—Destination, used when rendering as a link element via `as`.