SideKick Client

Installation

``bash
npm install sidekick-client
`

Important: Setup

This package uses Tailwind CSS v4 and requires you to have Tailwind installed in your consuming application.

$3

Install the required peer dependencies in your project:

`bash
npm install tailwindcss@^4.0.0 @tailwindcss/vite@^4.0.0
`

$3

Add the Tailwind plugin to your vite.config.ts:

`typescript
import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
plugins: [react(), tailwindcss()],
// ... rest of your config
});
`

$3

IMPORTANT: You must import the package's CSS file in your application's entry point (e.g., main.tsx or index.tsx):

`typescript
// main.tsx or index.tsx
import 'sidekick-client/dist/index.css';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(


,
);
`

The CSS file contains all the Tailwind utilities and custom styles needed for the components to work properly.

Usage

`typescript
import { SideKickClient } from 'sidekick-client';
import type { NavItem } from 'sidekick-client';

function App() {
return (
// your props here
/>
);
}
`

Theming

This package supports full theme customization through CSS variables. You can override colors, border radius, and other design tokens to match your brand.

$3

`css
/ In your app's CSS file, BEFORE importing the package CSS /
:root {
--sk-primary: oklch(0.5 0.3 250); / Custom primary color /
--sk-radius: 1rem; / Custom border radius /
}
`

Available Exports

$3

- SideKickClient - Main component

$3

- NavItemSub
- NavItem
- LoginCmd
- OrganizationType
- OrganizationTypeResponse
- loggedInUserInf
- purchasedPlansInfResponse
- purchasedPlansInf
- SessionInfoResponse
- EmailProcessingResult
- TeamMembersDetails
- responseTeamMembersInf
- IEachInvitation
- IInvitationsResponse
- ICountry
- ICountries
- ICreateOrderResponse
- IVerifyPaymentResponse

Troubleshooting

$3

If styles are not appearing in your application:

1. Import the CSS: Make sure you've imported sidekick-client/dist/index.css in your entry file
2. Verify Tailwind is installed: Make sure you have tailwindcss@^4.0.0 and @tailwindcss/vite@^4.0.0 installed
3. Check Vite config: Ensure the @tailwindcss/vite plugin is added to your Vite configuration
4. Restart dev server: After making changes, restart your development server

$3

If you encounter build issues:

1. Make sure all peer dependencies are installed (check package.json peerDependencies)
2. Ensure you're using compatible versions of React (^18.0.0 or ^19.0.0)
3. Clear your node_modules` and reinstall if needed