Quick start

A real page, from imports alone.

A landing page in one file

Sections are the differentiator: primitives are everywhere, but assembling a landing page usually means hand-writing the pricing table. Here it is a component.

import { Hero, FeatureGrid, Pricing, CTA, Footer, Button } from '@the_viveksingh/vivek-ui'

export default function Page() {
  return (
    <>
      <Hero
        title="Ship your website in a weekend"
        description="Every section you need, one npm install away."
        actions={<Button size="lg">Start free</Button>}
      />
      <FeatureGrid
        features={[
          { id: 'a', title: 'Fast', description: 'No runtime dependencies.' },
          { id: 'b', title: 'Accessible', description: 'Tested with axe.' },
        ]}
      />
      <Pricing
        plans={[
          { id: 'free', name: 'Free', price: '$0', features: ['1 project'] },
          { id: 'pro', name: 'Pro', price: '$9', features: ['Unlimited'], highlighted: true },
        ]}
      />
      <CTA title="Get started" actions={<Button size="lg">Install</Button>} />
      <Footer copyright="2026" />
    </>
  )
}

No 'use client' anywhere in that file. It is a Server Component.

A form that wires its own ARIA

import { Field, Input, Button } from '@the_viveksingh/vivek-ui'

<form>
  <Field label="Email" help="We will never share it." required>
    <Input type="email" autoComplete="email" />
  </Field>
  <Button type="submit">Sign up</Button>
</form>

Field generates the id, wires htmlFor, sets required and aria-invalid, and points aria-describedby at the hint. Pass error and it repoints at the error instead.

Back to the introduction