@aptimsolutions/react-component-library

React components and layout primitives for Aptim Solutions applications. Styles are delivered as a prebuilt Tailwind CSS bundle; you do not need to install Tailwind in your app for library components to look correct.

Requirements

• React and React DOM 18 or newer (peer dependencies).

Install

npm install @aptimsolutions/react-component-library

Quick start

1. Import global styles once

In your app entry (for example src/main.tsx or src/main.jsx), import the design system stylesheet before your app components:

import '@aptimsolutions/react-component-library/tailwind.css'

This provides Tailwind preflight, theme tokens used by the library (colours, font-sans, spacing, etc.), and the default font loading used by the design system.

2. Optional: root shell

Wrap your app (or layout) in AptimRoot for a consistent page background, base text colour, font stack, and antialiasing:

import { AptimRoot } from '@aptimsolutions/react-component-library'

export default function App() {
  return (
    <AptimRoot>
      {/* routes, layout, pages */}
    </AptimRoot>
  )
}

You can pass className to extend the shell (for example layout utilities). Prefer plain CSS or CSS modules for app-only chrome unless you also configure Tailwind in your app (see below).

3. Use components

import { Header } from '@aptimsolutions/react-component-library'

export function HomePage() {
  return (
    <Header
      headline="Welcome"
      subHeadline="Built with the Aptim design system"
    />
  )
}

Full entry example (Vite + React)

import '@aptimsolutions/react-component-library/tailwind.css'
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { AptimRoot } from '@aptimsolutions/react-component-library'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <AptimRoot>
      <App />
    </AptimRoot>
  </StrictMode>,
)

Package exports

| Import | Purpose | |--------|---------| | @aptimsolutions/react-component-library | Components and AptimRoot (ESM / CJS + TypeScript types). | | @aptimsolutions/react-component-library/tailwind.css | Prebuilt CSS for the design system. |

Prebuilt CSS vs Tailwind in your app

The published tailwind.css only contains utilities that the library source used when the package was built. Your own arbitrary Tailwind classes in application code (for example flex gap-4 p-8 in App.tsx) are not included in that file.

You can:

• Style your app shell with plain CSS, CSS modules, or other solutions, or
• Add Tailwind to your application and configure content to include your src files and the compiled library under node_modules/@aptimsolutions/react-component-library/dist. Use a compatible Tailwind major version with the one used to build this package.

For many projects, importing this package’s tailwind.css and using plain CSS for app-specific layout is enough.

Fonts

The default stylesheet loads fonts required for the design system’s typography. If you use @aptimsolutions/fonts separately in a monorepo or product, follow that package’s instructions; it is optional when using this library’s tailwind.css alone.

Development and source

Repository: github.com/aptim-solutions/aptim-design-system (package path: packages/react-component-library).