Package Import

Vinyaas components are source in your repository. Import them like any other local module — not from an npm UI package.

Source you own

After Installation, vinyaas add writes files under components/ui/<name>/. The vinyaas npm package is the CLI only. UI lives in your project.

Aliases

Imports use the aliases from components.json, typically @/components/ui. Keep the same paths in tsconfig.json / jsconfig.json so TypeScript and the bundler resolve them.

Import path

Import the component directory (its index file):

1
2
3
4
5
6
7
8
9
10
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";

export function Actions() {
  return (
    <Card>
      <Button>Save</Button>
    </Card>
  );
}

Default layout after add:

components/ui/button/index.tsx
components/ui/toast/index.tsx
components/ui/toast/toast.css