Installation

1. Install

npm install @the_viveksingh/vivek-ui

pnpm add @the_viveksingh/vivek-ui

yarn add @the_viveksingh/vivek-ui

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

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

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

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

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

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 />)

Only the CSS you use

One stylesheet is the simple answer and the right default. If you would rather ship less, every component also has its own file: a page built from Button, Card, Input, Navbar and Hero needs about 4 kB of CSS gzipped instead of 34.

// Instead of the whole stylesheet…
import '@the_viveksingh/vivek-ui/css/reset.css'
import '@the_viveksingh/vivek-ui/css/tokens.css'
import '@the_viveksingh/vivek-ui/css/button.css'
import '@the_viveksingh/vivek-ui/css/card.css'
import '@the_viveksingh/vivek-ui/css/input.css'

reset.css and tokens.css are the two everything else assumes; the rest are named after the component directory. A few components borrow another's look — Combobox uses the Input styles, DatePicker uses Calendar's — and say so on their own page. The JavaScript needs no equivalent: it already tree-shakes, so a Button import costs 780 B.

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

// 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>

What it runs on

Stated, and tested rather than assumed. The browser suite runs every route and every demo in Chromium at three viewports, in Firefox and in WebKit on each change; the CSS build targets exactly the list below, so a prefix Safari still needs is emitted rather than hoped for.

Older browsers are not blocked, they are simply not tested: the library uses:where(), container queries, color-mix() and logical properties, all of which need a 2023-or-later engine.

That is the whole setup