@rubriclab/fabric-ui

@rubriclab/fabric-ui

A small, typed React UI kit built on Radix UI and Tailwind CSS. Tree‑shakable, accessible, and designed to drop into modern Next.js apps.

Installation

# with bun
bun add @rubriclab/fabric-ui

# with npm
npm i @rubriclab/fabric-ui

# with pnpm
pnpm add @rubriclab/fabric-ui

Peer requirements:

• react ^19.0.0
• react-dom ^19.0.0
• next ^15.0.0

Recommended: Tailwind CSS for styling (tailwindcss, postcss, autoprefixer).

Quickstart

• Ensure Tailwind CSS is set up in your app (see Tailwind docs). Components render with utility classNames and look best with your Tailwind theme.

• Import components directly from the package:

import { Button, Container, Form, Input } from '@rubriclab/fabric-ui'

export const Example = () => {
	return (
		<Container>
			<Form>
                <Input placeholder="Title" />
                <Button type="submit" label="Save" />
            </Form>
		</Container>
	)
}

Notes:

• Icon uses names from lucide-react (e.g. "Check", "AlertCircle"). size is in Tailwind units (1 = 4px).
• All components are typed and tree‑shakable.

Available components

• Alert
• AlertDialog
• Button
• Chart
• Checkbox
• Code
• Command
• Container
• Dialog
• Divider
• Drawer
• DropdownMenu
• Empty
• ErrorState
• Field
• Form
• Grid
• Heading
• Icon
• Image
• Input
• Label
• Link
• List
• Loader
• Pill
• RequiredIndicator
• Select
• Table
• Text
• Textarea
• Toggle
• Tooltip

Browse the src/components directory for props and more examples.

Usage with Next.js

• Works with the App Router (Next 15+).
• Most components are SSR‑friendly; interactive parts rely on Radix primitives.

Theme variables (Tailwind + globals.css)

This library relies on a small set of Tailwind tokens that map to CSS variables. Components use classes like bg-background, text-foreground, border-border, bg-accent, text-destructive, etc., and a few spots reference CSS variables directly (e.g., charts use var(--background), var(--foreground), var(--border), var(--hover)).

Required tokens/variables:

• background → --background
• foreground → --foreground
• primary → --primary
• accent → --accent
• accent-foreground → --accent-foreground (recommended so selected items render readable text)
• border → --border
• hover → --hover
• destructive → --destructive
• muted → --muted
• muted-foreground → --muted-foreground

Recommended setup with Tailwind v4 (@theme inline) in your global CSS:

:root {
  --background: #ffffff;
  --foreground: #171717;
  --primary: oklch(54.6% 0.245 262.881);
  --accent: oklch(96.53% 0.004 262.56);
  --border: oklch(86.68% 0.017 261.56);
  --hover: oklch(92.05% 0.008 262.67);
  --destructive: oklch(62.72% 0.233 29.22);
  --muted: oklch(98.27% 0.001 95.47);
  --muted-foreground: oklch(13.68% 0.034 0.09);
  /* Optional but recommended */
  --accent-foreground: #111111;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
    --primary: oklch(54.6% 0.245 262.881);
    --accent: oklch(21.41% 0.007 89.49 / 60%);
    --border: oklch(26.98% 0.009 89.63);
    --hover: oklch(21.41% 0.007 89.49);
    --destructive: oklch(62.72% 0.233 29.22);
    --muted: oklch(15.48% 0.006 89.58);
    --muted-foreground: oklch(86.68% 0.017 261.56);
    /* Optional but recommended */
    --accent-foreground: #fafafa;
  }
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-primary: var(--primary);
  --color-border: var(--border);
  --color-hover: var(--hover);
  --color-destructive: var(--destructive);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
}

Using Tailwind v3 instead? Map tokens in tailwind.config.{js,ts} to the same CSS variables:

// tailwind.config.ts
import type { Config } from 'tailwindcss'

export default {
  content: ['./src/**/*.{ts,tsx,js,jsx}'],
  theme: {
    extend: {
      colors: {
        background: 'var(--background)',
        foreground: 'var(--foreground)',
        primary: 'var(--primary)',
        accent: 'var(--accent)',
        'accent-foreground': 'var(--accent-foreground)',
        border: 'var(--border)',
        hover: 'var(--hover)',
        destructive: 'var(--destructive)',
        muted: 'var(--muted)',
        'muted-foreground': 'var(--muted-foreground)'
      }
    }
  },
  plugins: []
} satisfies Config

Notes:

• Some components (e.g., Select, DropdownMenu) also use Radix UI internal variables like --radix-select-trigger-height; you do not need to define these.
• If accent-foreground isn’t provided, elements with text-accent-foreground may inherit an unintended color. Defining it ensures good contrast on selected/active states.

Types

All component props are exported via TypeScript types:

import type { ButtonProps } from '@rubriclab/fabric-ui'

Changelog & releases

Conventional commits automatically bump the version and update the changelog. If your local hooks didn’t run, try:

bun prepare

License

Apache-2.0 © Rubric Lab

See LICENSE for details.