Using ShadcnStore Blocks with TypeScript

Every ShadcnStore block and shadcn/ui component ships as typed .tsx source, so you get autocomplete, prop checking, and safe refactors out of the box. Because you own the code, the types live in your project and are yours to extend.

Prerequisites

A React or Next.js project with TypeScript configured and shadcn/ui initialised. If you have not set that up yet, follow the Installation guide first.

Importing components and prop types

Components export their prop types, so you can type wrappers and helpers precisely. Most shadcn/ui components also export a variants helper and its VariantProps:

import { Button, buttonVariants } from "@/components/ui/button"
import type { VariantProps } from "class-variance-authority"

type ButtonVariant = VariantProps<typeof buttonVariants>["variant"]
// "default" | "secondary" | "destructive" | "outline" | "ghost" | "link"

function SubmitButton(props: React.ComponentProps<typeof Button>) {
  return <Button type="submit" {...props} />
}

See the Button and Badge pages for the full prop tables.

Typing your own data

Blocks that render lists or accept content take plain props you can type in your app:

type Plan = {
  name: string
  price: number
  features: string[]
}

const plans: Plan[] = [
  { name: "Pro", price: 29, features: ["Unlimited blocks", "Priority support"] },
]

Keep data types in one place and import them where blocks consume them, so a schema change surfaces everywhere at compile time.

Path aliases

shadcn/ui uses the @/* path alias. Make sure it is defined in tsconfig.json so imports resolve:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["./*"] }
  }
}

The alias must match the aliases you set in components.json.

Strict mode

We recommend "strict": true. Blocks are written to pass strict checks, so enabling it catches missing props and unsafe access in your own code without fighting the components. If you add data-fetching to a block, type the response rather than using any.

Related

• Installation: set up shadcn/ui and the registry.
• components.json: configure aliases and paths.
• Using with Frameworks: TypeScript setup per framework.
• Components: typed prop references for each component.