Installation

Two steps. There is no third.

1. Install

terminal

npm install @the_viveksingh/vivek-ui

terminal

pnpm add @the_viveksingh/vivek-ui

terminal

yarn add @the_viveksingh/vivek-ui

terminal

bun add @the_viveksingh/vivek-ui

React 18 or 19 is a peer dependency. Nothing else is installed, because the package has no runtime dependencies of its own. Confirm it yourself with npm ls --omit=dev @the_viveksingh/vivek-ui.

2. Import the stylesheet once

app/layout.tsx

import '@the_viveksingh/vivek-ui/styles.css'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

pages/_app.tsx

import '@the_viveksingh/vivek-ui/styles.css'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

src/main.tsx

import '@the_viveksingh/vivek-ui/styles.css'
import { createRoot } from 'react-dom/client'
import { App } from './App'

const root = document.getElementById('root')
if (root) createRoot(root).render(<App />)

Using charts

Charts are a separate subpath with their own stylesheet, so an app that never draws one pays nothing for them.

import { LineChart } from '@the_viveksingh/vivek-ui/charts'
import '@the_viveksingh/vivek-ui/charts.css'

Compound components in Server Components

Use the named part exports on the server

Interactive compound components — Tabs, Accordion, Modal, Drawer, Navbar, Sidebar — are client components. From a Server Component they arrive as a client reference, and Tabs.List reads undefined off it. Import TabsList instead. Inside a client component either form works. Server-safe compounds like Card and Table are unaffected.

// In a Server Component
import { Tabs, TabsList, TabsTab } from '@the_viveksingh/vivek-ui'

// In a client component, either works
import { Tabs } from '@the_viveksingh/vivek-ui'
<Tabs.List>...</Tabs.List>

That is the whole setup

No config file, no CLI, no Tailwind, no PostCSS plugin, no Babel plugin, and no required provider. If you needed a third step, that would be a bug in the library's design.