@velocityuikit/velocityui

Accessible React UI components with scoped CSS Modules styles and TypeScript support.

Install

npm install @velocityuikit/velocityui

Peer dependencies:

• react >= 18
• react-dom >= 18

Usage

Import the stylesheet once at your app root:

import '@velocityuikit/velocityui/dist/style.css'

Use components in your app:

import { Button, Card, Input, Title } from '@velocityuikit/velocityui'

export function Example() {
  return (
    <Card variant="shadow">
      <Card.Header>
        <Title as="h2">Welcome</Title>
      </Card.Header>
      <Card.Body>
        <Input label="Email" placeholder="[email protected]" />
        <Button>Continue</Button>
      </Card.Body>
    </Card>
  )
}

Available Exports

• Forms: Button, Input, Textarea, Select, Checkbox, RadioGroup, Switch, Slider, NumberInput, FileUpload
• Display: Title, Badge, Avatar, Tag, EmptyState, Skeleton, Table
• Layout: Card, Divider, Accordion, Tabs
• Feedback: Alert, Spinner, Progress, ToastProvider, useToast
• Overlays: Dialog, Dropdown, Popover, Tooltip
• Navigation: Breadcrumb, Pagination, Stepper

Local Development

From the workspace root:

pnpm --filter velocityui build

Build output is written to dist/:

• dist/index.js — ESM bundle
• dist/index.cjs — CJS bundle
• dist/index.d.ts — TypeScript declarations
• dist/style.css — bundled component styles

Watch mode:

pnpm --filter velocityui dev

Typecheck:

pnpm --filter velocityui lint

Run tests:

pnpm --filter velocityui test
pnpm --filter velocityui test:run

Contributing

See the root CONTRIBUTING.md for the full contribution guide.

License

MIT