vagaro-tw-components

A collection of accessible, customizable React components built with TypeScript and Tailwind CSS.

Installation

npm install vagaro-tw-components
# or
yarn add vagaro-tw-components
# or
pnpm add vagaro-tw-components

Setup

1. Import the CSS

Import the component styles in your app's entry point:

import 'vagaro-tw-components/styles.css'

2. Tailwind Configuration

If you're using Tailwind CSS in your project, add the component library to your content paths to ensure proper style purging:

// tailwind.config.js
module.exports = {
  content: [
    // ... your other content paths
    './node_modules/vagaro-tw-components/**/*.{js,ts,jsx,tsx}',
  ],
  // ... rest of your config
}

Components

Button

A versatile button component with multiple variants and states.

import { Button } from 'vagaro-tw-components'

// Basic usage
<Button>Click me</Button>

// Variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>

// Sizes
<Button size="sm">Small</Button>
<Button size="md">Medium (default)</Button>
<Button size="lg">Large</Button>

// States
<Button disabled>Disabled</Button>
<Button loading>Loading...</Button>

// Full width
<Button fullWidth>Full Width Button</Button>

Card

A flexible container component for grouping related content.

import { Card } from 'vagaro-tw-components'

// Basic card
<Card>
  <h2>Card Title</h2>
  <p>Card content goes here</p>
</Card>

// With custom className
<Card className="max-w-md">
  <h2>Custom styled card</h2>
</Card>

// Without shadow
<Card shadow={false}>
  <p>Card without shadow</p>
</Card>

// Without border
<Card border={false}>
  <p>Card without border</p>
</Card>

Input

A form input component with label and error handling.

import { Input } from 'vagaro-tw-components'

// Basic input
<Input 
  label="Email"
  type="email"
  placeholder="Enter your email"
/>

// With error
<Input 
  label="Password"
  type="password"
  error="Password is required"
/>

// With helper text
<Input 
  label="Username"
  helperText="Choose a unique username"
/>

// Required field
<Input 
  label="Name"
  required
/>

// Disabled
<Input 
  label="Disabled field"
  disabled
/>

Badge

A small status indicator component.

import { Badge } from 'vagaro-tw-components'

// Variants
<Badge variant="default">Default</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="info">Info</Badge>

// Sizes
<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>

PageBanner

A banner component for displaying promotional content or announcements.

import { PageBanner } from 'vagaro-tw-components'

// Basic usage (uses standard anchor tag)
<PageBanner 
  text="Watch support videos, join a workshop, or schedule a one-on-one"
  href="https://mysite.vagaro.com/vagarouniversity"
/>

// Open in same tab
<PageBanner 
  text="Learn more about our features"
  href="/features"
  openInNewTab={false}
/>

// With Next.js Link
import Link from 'next/link'
<PageBanner 
  text="Visit our documentation"
  href="/docs"
  linkComponent={Link}
  openInNewTab={false}
/>

// With custom link props
<PageBanner 
  text="Check out our blog"
  href="/blog"
  linkProps={{ 
    className: "custom-class",
    onClick: (e) => console.log('Clicked!')
  }}
/>

// With React Router Link
import { Link } from 'react-router-dom'
<PageBanner 
  text="Go to dashboard"
  href="/dashboard"
  linkComponent={Link}
  linkProps={{ to: "/dashboard" }}
  openInNewTab={false}
/>

RightArrow

An SVG arrow icon component.

import RightArrow from 'vagaro-tw-components'

// Basic usage
<RightArrow />

// Custom size
<RightArrow width={24} height={24} />

// With custom class
<RightArrow fillClass="text-blue-500 hover:text-blue-700" />

// With aria label
<RightArrow ariaLabel="Navigate to next page" />

TypeScript Support

All components are written in TypeScript and include full type definitions. Your IDE will provide autocomplete and type checking out of the box.

import { Button, ButtonProps } from 'vagaro-tw-components'

const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />
}

Styling and Customization

Using the cn utility

The library exports a cn utility function for combining class names:

import { cn } from 'vagaro-tw-components'

<div className={cn(
  'base-class',
  isActive && 'active-class',
  customClass
)} />

Extending component styles

All components accept a className prop for additional styling:

<Button className="shadow-lg hover:shadow-xl transition-shadow">
  Custom styled button
</Button>

Custom Tailwind Colors

The components use Vagaro's custom color palette:

• primary: Brand primary color
• inkLightest: Light ink color for backgrounds
• Additional semantic colors for variants

Framework Integration

Next.js

For components that use links (like PageBanner), pass Next.js's Link component:

import Link from 'next/link'
import { PageBanner } from 'vagaro-tw-components'

<PageBanner linkComponent={Link} />

React Router

For React Router applications:

import { Link } from 'react-router-dom'
import { PageBanner } from 'vagaro-tw-components'

<PageBanner 
  linkComponent={Link}
  linkProps={{ to: "/path" }}
/>

Accessibility

All components follow accessibility best practices:

• Proper ARIA labels and roles
• Keyboard navigation support
• Focus management
• Screen reader friendly

Browser Support

The components support all modern browsers:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

To contribute to this component library:

1. Clone the repository
2. Install dependencies: pnpm install
3. Start development: pnpm dev
4. Run tests: pnpm test
5. Build: pnpm build

License

MIT