@epilot/core-ui

@epilot360/core-ui

Core UI package containing global design tokens and configurations for epilot's design system.

📖 View Storybook Documentation

Installation

npm  install  @epilot360/core-ui
# or
yarn  add  @epilot360/core-ui

Tailwind configuration

This package provides a shared Tailwind configuration for consistent styling. To use this in your project, add the following to your tailwind.config.js:

import tailwindConfig from '@epilot360/core-ui';

export default {
    presets: [tailwindConfig],
    //Project specific configurations
}

If you're only using the Tailwind preset without importing any components, you'll need to import the tokens separately to have access to the CSS variables:

import '@epilot360/core-ui/dist/tokens.css';

Design Tokens only

If you only want the design tokens without importing the entire library, you can import just the tokens.css file:

Import in JavaScript/TypeScript

import '@epilot360/core-ui/dist/tokens.css';

Or in a CSS file:

@import '@epilot360/core-ui/dist/tokens.css';

Theme Provider

A theme provider component that supports light and dark themes is available. To use it, wrap your application with the EpilotThemeProvider:

import { EpilotThemeProvider } from '@epilot360/core-ui';

function App() {
  return (
    <EpilotThemeProvider theme="light">
      {/* Other Components */}
    </EpilotThemeProvider>
  );
}

Note: When using theme switching, Tailwind color utilities (like text-blue-9) will not automatically respond to theme changes. Other utilities (typography, spacing, etc.) work normally regardless of theme.

Components

To use any of the components inside the library:

import { Button } from '@epilot360/core-ui';

function CustomComponent() {
  return (
    <Button variant="solid" size="2">
      Primary Button
    </Button>
  );
}