Features

• 50+ Components - Form controls, data display, feedback, layout, navigation, and utility components
• 1800+ Icons - Lucide icon components included
• TypeScript - Full TypeScript support with strict typing
• Emotion CSS-in-JS - Styled components with transient props
• Customizable - All components accept className and classnames props
• React 19 - Built for the latest React version

Installation

pnpm add @vacano/ui @emotion/react

Quick Start

import { Button, Input, Card } from '@vacano/ui'
import { GlobalStyle } from '@vacano/ui'

function App() {
  return (
    <>
      <GlobalStyle />
      <Card>
        <Input label="Email" placeholder="Enter your email" />
        <Button variant="success">Submit</Button>
      </Card>
    </>
  )
}

Package Exports

| Export | Description | |--------|-------------| | @vacano/ui | Main components | | @vacano/ui/icons | Lucide icon components | | @vacano/ui/lib | Utilities, hooks, constants, and types | | @vacano/ui/form | react-hook-form wrappers (FormInput, FormSelect, etc.) |

Components

Form

Autocomplete, Button, Checkbox, CheckboxCard, CheckboxGroup, DatePicker, FileUpload, Input, MultiSelect, OtpCode, Radio, RadioCard, RadioGroup, Select, Tags, Textarea, Toggle, ToggleCard, ToggleGroup

Data Display

Badge, Card, Chip, DateRange, Hashtag, Heading, Overline, Progress, Stat, Tabs, User

Feedback

Confirmation, Modal, Drawer, Notification, NotifyConfirmation, SaveProgress, Spinner, Toastr, Tooltip

Layout

Container, Divider, Panel

Navigation

Breadcrumbs, Dropdown, Pagination, Stepper

Utility

FieldLabel, FieldMessage, FieldRow, GlobalStyle, ImageCropper, KeysBindings, KeySymbol

Icons

import { IconSearch, IconUser, IconSettings } from '@vacano/ui/icons'

function Header() {
  return (
    <nav>
      <IconSearch size={20} />
      <IconUser size={20} />
      <IconSettings size={20} />
    </nav>
  )
}

Requirements

• Node.js >= 22.0.0
• React >= 19.0.0
• @emotion/react >= 11.0.0

Development

# Install dependencies
pnpm install

# Start Storybook
pnpm storybook

# Build library
pnpm build

# Run tests
pnpm test:run

# Type check
pnpm typecheck

# Lint
pnpm lint

License

MIT