Installation and Setup Guide for cosmoslib

This guide will walk you through setting up a new project with Vite, Tailwind CSS, and cosmoslib.

1. Create a new Vite project

First, create a new Vite project with React and TypeScript:

npm create vite@latest my-project -- --template react-ts
cd my-project
npm install

2. Install and configure Tailwind CSS

Install Tailwind CSS and its peer dependencies:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

3. Install cosmoslib

Install cosmoslib:

npm install @silvergravel/cosmoslib

4. Configure Tailwind CSS

Update your tailwind.config.js:

import { tailwindConfig } from '@silvergravel/cosmoslib';

export default {
  ...tailwindConfig,
  content: [
    ...tailwindConfig.content,
    "./node_modules/@silvergravel/cosmoslib/dist/**/*.{js,jsx,ts,tsx}",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
}

5. Update CSS file

In your main CSS file (e.g., src/index.css), add the following:

@import '@silvergravel/cosmoslib/style.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

6. Wrap your app with RadixThemeProvider

In your main App component (e.g., src/App.tsx):

import { RadixThemeProvider } from '@silvergravel/cosmoslib';

function App() {
  return (
    <RadixThemeProvider>
      {/* Your app content */}
    </RadixThemeProvider>
  );
}

export default App;

7. (Optional) Custom Theme Configuration

You can customize the font and color configuration by creating a THEME_CONFIG.ts file:

export const fontConfig = {
  defaultFont: {
    name: "Hind",
    url: "https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap",
  },
  headingFont: {
    name: "Jost",
    url: "https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap",
  },
  baseTypeSetting: {
    // ... (your custom type settings)
  }
};

export const colorConfig = {
  secondaryColor: 'purple',
  accentColor: 'tomato',
  grayColor: 'slate'
};

Then, pass these configurations to the RadixThemeProvider:

import { RadixThemeProvider } from '@silvergravel/cosmoslib';
import { fontConfig, colorConfig } from './THEME_CONFIG';

function App() {
  return (
    <RadixThemeProvider colorConfig={colorConfig} fontConfig={fontConfig}>
      {/* Your app content */}
    </RadixThemeProvider>
  );
}

Note: If you don't provide fontConfig or colorConfig, cosmoslib will use its default configurations.

8. Start your development server

Run your Vite development server:

npm run dev

Your project is now set up with Vite, Tailwind CSS, and cosmoslib. You can start using cosmoslib components and utilities in your React components.