@borisj74/bv-ds

React component library synced from Figma (Untitled UI v8.0), built on Tailwind CSS.

Install

npm install @borisj74/bv-ds

Peer dependencies — install alongside the package:

npm install react react-dom

If you use chart components, also install:

npm install recharts

Setup

1. Add the Tailwind preset

In your app's tailwind.config.js:

const dsPreset = require("@borisj74/bv-ds/tailwind-preset");

module.exports = {
  presets: [dsPreset],
  content: [
    "./src/**/*.{ts,tsx}",
    // Scan the DS source so Tailwind picks up component class names
    "./node_modules/@borisj74/bv-ds/src/**/*.{ts,tsx}",
  ],
};

2. Import the stylesheet

In your app's entry point (e.g. main.tsx or _app.tsx):

import "@borisj74/bv-ds/dist/index.css"; // if generated

3. Use components

import { Button, InputField, Toggle, Tooltip } from "@borisj74/bv-ds";

function App() {
  return (
    <Button hierarchy="Primary" size="md">
      Get started
    </Button>
  );
}

Components

91 components synced from Untitled UI v8.0, including:

• Buttons — Button, ButtonDestructive, ButtonUtility, ButtonCloseX, SocialButton
• Inputs — InputField, LeadingInputField, TrailingInputField, TagsInputField, TextareaInputField, VerificationCodeInput, NumberInput, MegaInputFieldBase
• Navigation — SidebarNavigation, HeaderNavigation, NavItemBase, NavButton, NavFeaturedCard, NavAccountCard, Breadcrumbs, Tabs, TabButtonBase
• Feedback — Alert, Notification, Tooltip, LoadingIndicator, ProgressBar, ProgressCircle
• Data display — Badge, Tag, Avatar, StatusIcon, MetricItem, ActivityGauge, LineAndBarChart, Table cells and headers
• Overlays — ContextMenu, DropdownMenu, Select, MultiSelect, DatePicker, FilterBar, Slider, Toggle
• Layout — ContentHeading, ContentParagraph, ContentDivider, SectionHeader, SectionFooter, PageHeader, Modal primitives
• Charts — ActivityGauge, LineAndBarChart (Recharts-based), ChartMini sparkline
• Forms — Checkbox, Radio, RadioGroup, RadioGroupItem, ButtonGroup, Pagination

Full component list and Storybook: chromatic.com

Tailwind tokens

Design tokens are available via the preset. Import and use directly in your own components:

// tailwind.config.js preset exposes:
// Colors: bg-brand-solid, text-secondary, border-primary, fg-quaternary ...
// Spacing: p-md, gap-xl, px-3xl ...
// Radius: rounded-md, rounded-full ...
// Typography: text-sm, text-display-xs ...

License

MIT © borisj74