```bash npm install sidekick-client ```
npm install sidekick-client``bash`
npm install sidekick-client
This package uses Tailwind CSS v4 and requires you to have Tailwind installed in your consuming application.
Install the required peer dependencies in your project:
`bash`
npm install tailwindcss@^4.0.0 @tailwindcss/vite@^4.0.0
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
});
`
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.
`typescript
import { SideKickClient } from 'sidekick-client';
import type { NavItem } from 'sidekick-client';
function App() {
return (
/>
);
}
`
This package supports full theme customization through CSS variables. You can override colors, border radius, and other design tokens to match your brand.
`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 /
}
- SideKickClient - Main component
- NavItemSubNavItem
- LoginCmd
- OrganizationType
- OrganizationTypeResponse
- loggedInUserInf
- purchasedPlansInfResponse
- purchasedPlansInf
- SessionInfoResponse
- EmailProcessingResult
- TeamMembersDetails
- responseTeamMembersInf
- IEachInvitation
- IInvitationsResponse
- ICountry
- ICountries
- ICreateOrderResponse
- IVerifyPaymentResponse
-
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 filetailwindcss@^4.0.0
2. Verify Tailwind is installed: Make sure you have and @tailwindcss/vite@^4.0.0 installed@tailwindcss/vite
3. Check Vite config: Ensure the plugin is added to your Vite configuration
4. Restart dev server: After making changes, restart your development server
If you encounter build issues:
1. Make sure all peer dependencies are installed (check package.json peerDependencies)node_modules` and reinstall if needed
2. Ensure you're using compatible versions of React (^18.0.0 or ^19.0.0)
3. Clear your