INSTALLATION

Add any component with a single command. The shadcn CLI downloads the source into your project and installs dependencies automatically.

First time only — init shadcn + add registry

If you don't have shadcn set up yet, initialise it first:

BASH

npx shadcn@latest init

Then add the scificn registry to components.json:

JSON

{
  "registries": {
    "scificn": "https://scificn.dev/r"
  }
}

Add globals.css — required once

Copy src/styles/globals.css from the scificn-ui repo into your project, then import it at your root:

CSS

/* src/index.css — or wherever your root CSS lives */
@import './styles/globals.css';

This file defines every design token — CSS variables, Tailwind @theme blocks, glow animations, and the three theme overrides. Components won't render correctly without it.

Add components

Install one or several at a time. The CLI copies the source into your project and runs npm install for any peer dependencies:

BASH

npx shadcn@latest add @scificn/button @scificn/badge @scificn/panel
npx shadcn@latest add @scificn/dialog @scificn/toast @scificn/tabs

Use it

TSX

import { Button } from '@/ui/button'
import { Badge }  from '@/ui/badge'

export function MyPage() {
  return (
    <>
      <Button variant="EXEC">INITIATE</Button>
      <Badge variant="ACTIVE">ONLINE</Badge>
    </>
  )
}