Vinci Hair Clinic Design System

Shared foundations, CSS utilities, and React components for Vinci Hair Clinic applications and WordPress/Elementor sites.

Start here

npm install
npm run storybook

The documentation opens locally in Storybook. For repository-level context, use these guides:

• Product context
• Visual design language
• Foundations
• Responsive behavior
• Tokens
• Accessibility
• Forms
• Conversational form
• Navigation
• Cards and content
• Dashboard components
• React
• WordPress and Elementor
• Contributing
• Releasing

React

npm install @vincihairclinic/design-system

import "@vincihairclinic/design-system/styles.css";
import { Button } from "@vincihairclinic/design-system";

export function BookingCallToAction() {
  return <Button>Book a consultation</Button>;
}

See the Button API for variants and native props.

WordPress and Elementor

make plugin

Install the versioned ZIP from artifacts/ through the WordPress plugin screen. Apply documented vinci-* classes through Elementor's Advanced → CSS Classes field.

Commands

| Command | Purpose | | --- | --- | | npm run storybook | Run the living documentation locally. | | make build | Build ESM, CJS, declarations, and distributable CSS. | | make docs | Build the static Storybook. | | make plugin | Generate the versioned WordPress plugin ZIP. | | make test | Run source, accessibility, and documentation checks. | | make verify | Run the complete release gate. | | make clean | Remove generated artifacts only. |

License and assets

The package is public for technical distribution but is UNLICENSED. Myriad Pro is referenced but not distributed; production use requires a valid Adobe webfont license. No patient photography, clinic logo, or medical claims are included in this repository.