opact

All-in-one React UI component library with Tailwind CSS v4, auto-imports, and a Vite plugin preset.

Install

npm install opact

Peer dependencies — install these in your project if not already present:

npm install react react-dom vite

Usage

1. Import the CSS theme

// main.tsx or your app entry
import 'opact/css'

2. Add the Vite plugin

// vite.config.ts
import { defineConfig } from 'vite'
import { opact } from 'opact/vite'

export default defineConfig({
  plugins: [opact()],
})

The opact() plugin bundles:

• @vitejs/plugin-react with React Compiler enabled by default
• @tailwindcss/vite
• vite-tsconfig-paths
• unplugin-auto-import — auto-imports all opact components, react, and react-i18next

Plugin options

opact({
  // Extra directories to auto-import components from
  autoImportDirs: ['./src/components'],

  // Extra packages to auto-import (e.g. 'react-router-dom')
  autoImportPackages: [],

  // tsconfig files for path resolution
  tsconfigProjects: ['./tsconfig.json'],

  // Disable React Compiler (babel transform)
  reactCompiler: false,

  // Plugins inserted before the React plugin (e.g. TanStack Router)
  beforeReact: [],
})

3. Use components

Because auto-imports are enabled, you can use components without importing them:

export default function App() {
  return (
    <Card>
      <Button>Click me</Button>
    </Card>
  )
}

Or import explicitly:

import { Button, Card } from 'opact'

Components

Accordion, Alert, AlertDialog, AspectRatio, Avatar, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Chart, Checkbox, Collapsible, Combobox, Command, ContextMenu, Dialog, Drawer, DropdownMenu, Empty, Field, FlexiTabs, HoverCard, InfiniteScrollArea, Input, InputGroup, InputOtp, Item, Kbd, Label, Menubar, NavigationMenu, Pagination, Popover, Progress, RadioGroup, Rating, Resizable, Ripple, ScrollArea, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Sonner, Spinner, SvgImage, Switch, Table, Tabs, Textarea, Toggle, ToggleGroup, Tooltip

License

MIT