Getting Started

Add CS 1.6 styled components to your React project. No npm package — components are copied directly into your codebase.

Prerequisites

• React 19+
• Tailwind CSS v4
• TypeScript

Install via CLI (recommended)

counterstrike-cn uses the shadcn registry namespace protocol. One-time setup, then install any component by name.

1. Add the registry

Open your components.json (created by npx shadcn@latest init) and add the registries field:

{
  "registries": {
    "@cscn": "https://counterstrike-cn.com/r/{name}.json"
  }
}

2. Install components

npx shadcn@latest add @cscn/button

Install multiple at once:

npx shadcn@latest add @cscn/button @cscn/card @cscn/dialog @cscn/hud

The CLI will:

1. Resolve @cscn/button → https://counterstrike-cn.com/r/button.json
2. Copy the .tsx file into your project's components/ui/cscn/ directory
3. Include cstrike.css (the shared stylesheet for all components)

Manual Install

If you're not using shadcn's CLI, you can copy components manually:

1. Copy the CSS

Every component requires the shared stylesheet. Copy components/ui/cscn/styles/cstrike.css into your project and import it in your root layout:

import "@/components/ui/cscn/styles/cstrike.css";

2. Copy the component

Copy the component .tsx file from components/ui/cscn/ into your project. For example, for the Button:

components/ui/cscn/button.tsx → your-project/components/ui/cscn/button.tsx

3. Install dependencies

All components use these base dependencies:

npm install clsx tailwind-merge class-variance-authority

Some components need additional Radix UI primitives:

4. Install the font (optional)

For the authentic CS 1.6 look, download the Counter-Strike font by SoJa and add it to your project. The CSS references it as "Counter-Strike" font family.

Your first component

import { Button } from "@/components/ui/cscn/button";

export default function Page() {
  return (
    <div className="p-8" style={{ background: "#4A5942" }}>
      <Button variant="primary">Connect</Button>
      <Button variant="secondary">Cancel</Button>
    </div>
  );
}

Browse all components

See the full library with live previews in the Components section.