GlassKit UI

A clean, modern UI component library built with React, TypeScript, and Framer Motion animations.

Button Component

The Button component is a flexible, customizable button with three sizes and hover animation.

Installation

npm install glasskit

Usage

import { Button } from 'glasskit';

// Basic usage
<Button>Hover Me</Button>

// Different sizes
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>

// Custom styling with inline styles
<Button
  style={{
    backgroundColor: '#8b5cf6',
    color: 'white',
    borderRadius: '9999px'
  }}
>
  Purple Button
</Button>

// Custom styling with className
<Button className="my-custom-button">
  Custom Class Button
</Button>

// Disabled state
<Button disabled>Disabled</Button>

// With onClick handler
<Button onClick={() => alert('Button clicked!')}>
  Click Handler
</Button>

// Form submit button
<Button type="submit">Submit Form</Button>

Props

| Prop | Type | Default | Description | | --------- | ------------------------------- | -------- | -------------------------- | | children | ReactNode | - | Button content | | size | 'small' | 'medium' | 'large' | 'medium' | Button size | | onClick | function | - | Click handler | | className | string | '' | Additional CSS class names | | style | CSSProperties | - | Inline styles | | type | 'button' | 'submit' | 'reset' | 'button' | Button type | | disabled | boolean | false | Disables the button |

Customization

Basic Styling

The Button component supports two main approaches for customization:

1. CSS Classes: Use the className prop to apply custom CSS classes.

<Button className="my-custom-button">Custom Button</Button>

Then in your CSS:

.my-custom-button {
  background-color: #10b981;
  color: white;
  border-radius: 8px;
}

2. Inline Styles: Use the style prop for one-off styling needs.

<Button
  style={{
    backgroundColor: '#f43f5e',
    color: 'white',
    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
  }}
>
  Custom Style
</Button>

Customizing Animation

You can customize the hover animation background by targeting the .button-bg element within your button:

.custom-animation .button-bg {
  background-color: rgba(255, 255, 255, 0.3); /* Change animation color */
}

Animation

The Button component uses Framer Motion to create a circle reveal animation on hover. This provides a modern, interactive feel to your UI.

Development

# Install dependencies
npm install

# Run Storybook for development
npm run dev

# Build the component library
npm run build

# Run tests
npm test

# Build Storybook for static deployment
npm run build-storybook

# Publish to npm
npm run publish

Adding Components

1. Create a new component directory in src/components/
2. Create your component file with TypeScript (e.g., ComponentName.tsx)
3. Add an index.ts file to export your component
4. Create a story file (e.g., ComponentName.stories.tsx)
5. Export your component in src/index.ts

Tech Stack

• React
• TypeScript
• Vite
• Storybook