@qinolabs/ui-core

Core UI component library built on Base UI + Tailwind CSS v4.

Installation

npm install @qinolabs/ui-core

Peer dependencies

npm install react react-dom tailwindcss class-variance-authority clsx tailwind-merge lucide-react next-themes sonner @base-ui/react react-resizable-panels

Tailwind CSS v4 Setup

Add the following to your app's CSS file:

@import "tailwindcss";
@import "@qinolabs/ui-core/styles/globals.css";
@source "../node_modules/@qinolabs/ui-core/dist/";

The @source directive tells Tailwind to scan the package for class names, ensuring all component styles are included in your build.

Usage

import { Button } from "@qinolabs/ui-core/components/button";
import { Dialog, DialogContent } from "@qinolabs/ui-core/components/dialog";
import { Input } from "@qinolabs/ui-core/components/input";
import { cn } from "@qinolabs/ui-core/lib/utils";

Components

Primitives and composed components:

• Layout: Card, Frame, Separator, Group, Sidebar, Resizable panels
• Forms: Input, Textarea, Select, Checkbox, Radio, Switch, Slider, Number field, Combobox, Autocomplete
• Feedback: Alert, Dialog, Sheet, Toast, Spinner, Progress, Meter, Skeleton
• Navigation: Tabs, Breadcrumb, Pagination, Menu, Toolbar, Command palette
• Display: Badge, Avatar, Table, Tooltip, Popover, Preview card, Collapsible, Accordion, Toggle

License

MIT