@inpulse-ui/core

The core.

Installation

pnpm add @inpulse-ui/core
# or
bun add @inpulse-ui/core
# or
yarn add @inpulse-ui/core
# or
npm install @inpulse-ui/core

Usage

Full Styles

Import the whole UI stylesheet (theme + utilities):

@import "@inpulse-ui/core";

Individual Styles

You can also import theme and utilities separately:

/* Theme variables only */
@import "@inpulse-ui/core/theme";

/* Utility classes only */
@import "@inpulse-ui/core/utilities";

What's Included

Theme Variables

• Colors: Complete color palette with HSL values
  • background, foreground
  • primary, primary-foreground
  • secondary, secondary-foreground
  • muted, muted-foreground
  • accent, accent-foreground
• Dark mode support: Automatic dark mode with @media (prefers-color-scheme: dark) and .dark class

Utility Classes

• Animations: Pre-built animations for common UI patterns

  • Accordion animations (animate-accordion-down, animate-accordion-up)
  • Checkmark animations (animate-checkmark-small-line, animate-checkmark-large-line)
  • Loading dots animations (animate-loading-dots-1, animate-loading-dots-2, animate-loading-dots-3)
  • Ripple effect (animate-ripple-effect)

• Layout Utilities: Additional layout helpers

  • min-h-viewport (100svh)

• Content Utilities: Pseudo-element content helpers

  • content-el, content-element

• Transition Utilities: Custom transition properties

  • transition-stroke

Base Styles

• Image styles: Optimized default styles for images with LQIP support

Customization

You can override any theme variables by defining them in your own CSS:

:root {
  --primary: 200 100% 50%; /* Custom primary color */
  --primary-foreground: 0 0% 100%;
}

@import "@inpulse-ui/core";

Documentation

Visit https://ui.inpulse.cx/components/getting-started to view the documentation.

License

Licensed under the MIT license.