---

description: Frontend dev with React, Typescript, shadcn and Tailwind

globs:

alwaysApply: false

---

// TypeScript React .cursorrules

// Prefer functional components

const preferFunctionalComponents = true;

// TypeScript React best practices

const typescriptReactBestPractices = [

"Use React.FC for functional components with props",

"Utilize useState and useEffect hooks for state and side effects",

"Implement proper TypeScript interfaces for props and state",

"Use React.memo for performance optimization when needed",

"Implement custom hooks for reusable logic",

"Utilize TypeScript's strict mode",

];

// Folder structure

const folderStructure = `

src/

components/

hooks/

pages/

utils/

App.tsx

index.tsx

`;

// Additional instructions

const additionalInstructions = `

1. Use .tsx extension for files with JSX

2. Implement strict TypeScript checks

3. Utilize React.lazy and Suspense for code-splitting

4. Use type inference where possible

5. Implement error boundaries for robust error handling

6. Follow React and TypeScript best practices and naming conventions

7. Use ESLint with TypeScript and React plugins for code quality

`;

import * as SliderPrimitive from "@radix-ui/react-slider";

import * as React from "react";

import { cn } from "utils/cn";

const Slider = React.forwardRef<

React.ElementRef<typeof SliderPrimitive.Root>,

React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>

>(({ className, ...props }, ref) => (

<SliderPrimitive.Root

ref={ref}

className={cn(

"relative flex w-full touch-none select-none items-center h-1.5",

className,

)}

{...props}

>

<SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-content-secondary">

<SliderPrimitive.Range className="absolute h-full bg-content-primary" />

</SliderPrimitive.Track>

<SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-solid border-content-primary bg-surface-primary shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />

</SliderPrimitive.Root>

Slider.displayName = SliderPrimitive.Root.displayName;

export { Slider };