FeedbackKit
Docs
CSS Customization

CSS Customization

Customize the appearance of FeedbackKit components using CSS variables, custom styles, and theme configurations.

Overview

CSS Variables

Use CSS custom properties to customize colors, spacing, and typography

Theme Props

Pass theme configuration through component props for dynamic styling

Custom CSS

Override default styles with your own CSS classes and selectors

Theme Configuration

Theme Object

Configure the widget appearance using a theme object

const theme = {
  // Colors
  primaryColor: "#8b5cf6",
  secondaryColor: "#64748b",
  backgroundColor: "#ffffff",
  textColor: "#1e293b",
  
  // Typography
  fontFamily: "Inter, system-ui, sans-serif",
  fontSize: "14px",
  
  // Spacing
  borderRadius: "8px",
  padding: "16px",
  
  // Shadows
  boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
  
  // Animation
  transitionDuration: "200ms",
  transitionTiming: "ease-in-out"
};

CSS Customization

Basic CSS Customization

Customize the widget using CSS variables and selectors

/* Custom CSS for FeedbackKit widget */
.feedbackkit-widget {
  /* Widget container */
  --fk-primary-color: #8b5cf6;
  --fk-secondary-color: #64748b;
  --fk-background-color: #ffffff;
  --fk-text-color: #1e293b;
  --fk-border-radius: 8px;
  --fk-font-family: 'Inter', system-ui, sans-serif;
  --fk-font-size: 14px;
  --fk-padding: 16px;
  --fk-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --fk-transition: 200ms ease-in-out;
}

/* Floating trigger button */
.feedbackkit-trigger {
  background: var(--fk-primary-color);
  border-radius: var(--fk-border-radius);
  box-shadow: var(--fk-box-shadow);
  transition: all var(--fk-transition);
}

.feedbackkit-trigger:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px -5px rgba(139, 92, 246, 0.3);
}

/* Feedback overlay */
.feedbackkit-overlay {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

/* Feedback form */
.feedbackkit-form {
  background: var(--fk-background-color);
  border-radius: var(--fk-border-radius);
  padding: var(--fk-padding);
  font-family: var(--fk-font-family);
  font-size: var(--fk-font-size);
  color: var(--fk-text-color);
  box-shadow: var(--fk-box-shadow);
}

/* Form inputs */
.feedbackkit-input {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px;
  font-family: var(--fk-font-family);
  transition: border-color var(--fk-transition);
}

.feedbackkit-input:focus {
  border-color: var(--fk-primary-color);
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* Buttons */
.feedbackkit-button {
  background: var(--fk-primary-color);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 12px 24px;
  font-family: var(--fk-font-family);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--fk-transition);
}

.feedbackkit-button:hover {
  background: #7c3aed;
  transform: translateY(-1px);
}

.feedbackkit-button-secondary {
  background: var(--fk-secondary-color);
  color: white;
}

.feedbackkit-button-secondary:hover {
  background: #475569;
}

CSS Variables Reference

Colors

--fk-primary-colorPrimary brand color
--fk-secondary-colorSecondary color
--fk-background-colorBackground color
--fk-text-colorText color

Layout

--fk-border-radiusBorder radius
--fk-paddingPadding
--fk-font-familyFont family
--fk-font-sizeFont size

Best Practices

Do's

Use CSS variables for consistent theming
Test your customizations across different screen sizes
Maintain sufficient color contrast for accessibility
Use semantic class names for better maintainability

Don'ts

Don't use !important unless absolutely necessary
Avoid hardcoding colors - use CSS variables
Don't override core functionality with CSS
Avoid deeply nested selectors for better performance