clarity-vision-react-components

v0.3.34

Published

2 days ago

Clarity Vision React component library

0High
0Medium
0Low

clarityvision

react components ui design-system visionclarity

@clarity-vision-react-components

A comprehensive React component library built for the Clarity Vision design system.

Requirements

React 19+
@tabler/icons-react 3+

Installation

npm install clarity-vision-react-components @tabler/icons-react

Setup

Import the stylesheet once in your app entry (e.g. main.tsx):

import 'clarity-vision-react-components/style.css';

This provides the CSS custom property tokens (colors, typography, spacing) required by all components.

Dark mode

Wrap your app in ThemeProvider to enable light/dark switching:

import { ThemeProvider } from 'clarity-vision-react-components';

function App() {
  return (
    <ThemeProvider defaultMode="light">
      {/* your app */}
    </ThemeProvider>
  );
}

Toggling dark mode adds/removes the dark class on <html> automatically.

Usage

import { Button, Badge, Avatar, Input } from '@clarity-vision-react-components';

function Example() {
  return (
    <div>
      <Avatar name="Jane Doe" size="md" />
      <Badge color="success">Active</Badge>
      <Button expression="brand" hierarchy="primary">Get started</Button>
      <Input label="Email" placeholder="[email protected]" />
    </div>
  );
}

Components

| Component | Description | |---|---| | Accordion | Collapsible content sections | | Alert | Contextual feedback messages | | Avatar / AvatarGroup | User profile pictures with fallback initials | | Badge | Status and label indicators | | Banner | Full-width notification bars | | BottomSheet | Slide-up sheet panel | | Breadcrumb | Navigation trail | | Button | Actions with expressions, hierarchies and icon support | | ButtonGroup | Segmented button sets | | Calendar | Full month grid with events and range selection | | Card / CardHeader | Content containers | | Chip / ChipGroup | Filterable tag pills | | ColorPicker | Hex color swatch selector | | Combobox | Searchable select with multi-select and grouping | | DatePicker | Date/time input with calendar popover | | Drawer | Slide-in side panel | | Dropdown | Menu with actions | | EmptyState | Zero-data placeholder screens | | FileUpload | Drag-and-drop file input | | FormControls (Checkbox, Radio, Toggle) | Form selection controls | | Input / Textarea | Text inputs | | LoadingIndicator / Skeleton | Loading states | | Messaging | Chat thread with send input | | Modal | Dialog overlay | | NumberInput | Numeric stepper | | Pagination | Page navigation | | Progress (ProgressBar, ProgressCircle) | Progress indicators | | Rating | Star/heart/circle rating | | Sidebar | Navigation sidebar with nested items | | Slider | Range slider | | Stat | Metric card with trend indicator | | Stepper | Multi-step progress tracker | | Table | Data table with sorting | | Tabs | Tabbed content panels | | TagInput | Free-text tag entry with suggestions | | Timeline | Chronological event feed | | Toast / ToastProvider / useToast | Notification toasts | | Tooltip | Hover info labels |

Theming

All components use CSS custom properties. Override tokens in your own CSS after importing the stylesheet:

:root {
  --accent-base: #your-brand-color;
  --bg-primary: #ffffff;
  /* ... */
}

Publishing

Publishing is handled automatically via the GitHub Actions workflow (.github/workflows/publish.yml). It triggers whenever a version tag is pushed to the repository.

Prerequisites

An npm account with publish access to the clarity-vision-react-components package
NPM_TOKEN secret set in the GitHub repository (Settings → Secrets and variables → Actions)

How to publish a new version

The workflow only triggers on tag pushes, not regular commits. To publish:

# 1. Bump the version — choose patch, minor, or major
npm version patch   # e.g. 0.1.0 → 0.1.1
npm version minor   # e.g. 0.1.0 → 0.2.0
npm version major   # e.g. 0.1.0 → 1.0.0

# 2. Push both the commit AND the tag
git push && git push --tags

npm version automatically updates package.json, creates a git commit, and creates a git tag (e.g. v0.1.1). The git push --tags is what triggers the workflow — without it GitHub never sees the tag.

What the workflow does

Once the tag is pushed, the pipeline runs three jobs in order:

build — installs dependencies, runs typecheck, lint, and test
publish-npm — builds the package and publishes it to npm
release — creates a GitHub Release with an auto-generated changelog from commit messages

What gets published

Only the dist/ folder is included in the package (controlled by "files": ["dist"] in package.json):

dist/
  index.js        ← all components, tree-shakeable ES module
  style.css       ← CSS token variables (light + dark theme)
  index.d.ts      ← TypeScript declarations entry
  components/     ← per-component .d.ts files
  theme/          ← theme types and context declarations

Source files, the demo app, and dev tooling are never shipped.

React Compiler

The React Compiler is enabled on this template. See this documentation for more information.

Note: This will impact Vite dev & build performances.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])