Crystal Button

A six-point crystal action, horizontal with text or vertical with an icon.

Components / Crystal Button

Actionsbuttonlinkcrystal

Six-point crystal button or link, with a horizontal CTA shape and a narrow vertical icon-only variation.

Preview

Loading preview…

Usage

A six-point crystal action, horizontal with text or vertical with an icon.

<CrystalButton href="/app" tone="loud">Open app</CrystalButton>
<CrystalButton orientation="vertical" aria-label="New thread" onClick={createThread}>
  <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth={2.5}>
    <path d="M12 5v14M5 12h14" />
  </svg>
</CrystalButton>

Files

components/steez/CrystalButton.tsxcomponent

components/steez/CrystalButton.module.cssstyle

Install package

pnpm add @steez-ui/theme @steez-ui/icons @steez-ui/ui

import { CrystalButton } from "@steez-ui/ui";

Install from registry

pnpm dlx shadcn@latest add https://steez-ui-6v5.pages.dev/r-steez/crystal-button.json

Source files install at your project root. Import styles/steez/tokens.css once in your global stylesheet or root layout. No Steez packages needed.

import { CrystalButton } from "<project-root>/components/steez/CrystalButton";

Replace <project-root> with a relative path from your file.

Copy standalone file

/copy/steez/crystal-button.tsxLoading…

Copy the entire generated TSX file into your React project. It embeds CSS, local helpers, icons, and theme fallbacks, so no Steez npm packages are required.

Open standalone source

Button

Primary, secondary, and danger actions with shared Steez button styling.

Quartz Crystal

A floating quartz with nine animated facets, local layout, and optional parallax.

Cyberpunk Tile

Cut-corner tile with dual-layer border (top-right + bottom-left clips).