preskok/ui

Manual Installation

PreviousNext

Configure Preskok UI without a framework preset.

Add Tailwind CSS

Components are styled with Tailwind CSS. Install Tailwind CSS in your project before adding Preskok UI.

Follow the Tailwind CSS installation instructions to get started.

Configure path aliases

Configure the @ path alias in your tsconfig.json file.

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

Create components.json

Create a components.json file in the root of your project.

components.json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "preskok",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/styles/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}

Add components

You can now add Preskok components to your project.

pnpm dlx preskok-ui@latest add button

The command above will add the Button component to src/components/ui/preskok-ui/button.tsx. You can then import it like this:

src/App.tsx
import { Button } from "@/components/ui/preskok-ui/button"
 
export function App() {
  return <Button>Click me</Button>
}
LaravelNext.js