Getting Started

Requirements

Node.js 18+
React 18+ or 19
Tailwind CSS (for styling)

Installation

npm install @codespark/react

Tailwind CSS Configuration

Codespark uses Tailwind CSS and shadcn/ui for styling. Ensure Tailwind CSS is installed in your project before proceeding.

Tailwind v4

Import the styles in your app:

globals.css

@import "@codespark/react/index.css";
@source "../../node_modules/@codespark/react";

Make sure the path matches the location of your node_modules folder relative to your CSS file.

Tailwind v3

Import CSS file to your project. Take vite project as an example:

main.tsx

import '@codespark/react/index.css';

Add codespark to the content array in tailwind.config.js:

tailwind.config.js

module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    '../node_modules/@codespark/react/dist/*.js', 
  ],
  // ... rest of your config
}

Font Configuration (Optional)

Codespark uses "Fira Code" as the default font family. Install the font for a better editing experience.

Using Fontsource

Install the font package:

npm install @fontsource/fira-code

Import the font in your app entry file:

main.tsx

import '@fontsource/fira-code';

Using Google Fonts CDN

Add the following to your HTML <head>:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap">

Or import in your CSS file:

global.css

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');

Using Next.js

Next.js has built-in font optimization with next/font. Configure the font in your layout file:

app/layout.tsx

import { Fira_Code } from 'next/font/google';

const firaCode = Fira_Code({
  subsets: ['latin'],
  variable: '--font-fira-code',
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={firaCode.variable}>
      <body>{children}</body>
    </html>
  );
}

Then add the CSS variable to your global styles:

globals.css

:root {
  --font-mono: var(--font-fira-code), ui-monospace, monospace;
}

Reading Tips

This documentation is built with Codespark, featuring interactive code examples throughout. Look for these action buttons in the top-right corner of code blocks:

Icon	Action	Description
	Open in Playground	Launch the code in a full-featured playground environment for experimentation.
	Toggle Preview	Switch between viewing the source code and a live preview of the rendered output.
	Copy Code	Copy the code snippet to your clipboard.

Try it out:

export default function App() {
  return <h1 className="text-center text-2xl font-bold">Hello, Codespark!</h1>;
}

On this page