ruler.ui

ruler.ui is an open-source React UI component library for building clean, consistent application interfaces faster. It provides typed, reusable components for common product UI—buttons, forms, overlays, navigation, data displays, loading states, and more—along with built-in light and dark theme support.

Built with TypeScript, React, Tailwind CSS, and accessible HTML/ARIA patterns.

Why ruler.ui?

When building a product, repeating the same UI work—forms, modals, tables, status messages, and loading states—slows a team down and makes interfaces inconsistent. ruler.ui gives you a shared component foundation so you can focus on product features while keeping the experience cohesive.

• Reusable — compose polished interfaces from ready-made React components.
• Typed — TypeScript types are included for exported component props.
• Theme-aware — light and dark styles work from a single .dark class.
• Flexible — pass className and regular HTML props to tailor components to your product.
• Open source — released under the MIT License.

Components

| Area | Components | | --- | --- | | Actions & feedback | Button, Alert, Badge, Progress, Tooltip | | Forms | Input, input variants, Label, Field, Checkbox, Radio, RadioGroup, Switch | | Layout & display | Avatar, AvatarGroup, Card, Table, DataTable, Pagination | | Navigation | Accordion, Tabs, Menu, Dropdown, stepper variants | | Overlays | Dialog, Modal | | Loading | skeleton components and 15 loader styles |

Installation

Install the package in an existing React application:

npm install ruler-components

yarn add ruler-components

pnpm add ruler-components

React and React DOM 18 or newer are required peer dependencies.

Include the styles

Import the packaged stylesheet once in your application entry point, such as app/layout.tsx in Next.js or src/main.tsx in Vite:

import "ruler-components/dist/styles.css";

The stylesheet is generated with Tailwind CSS 4 and includes the styles used by the library components.

Quick start

import { Alert, Button, Card, CardContent, CardHeader, CardTitle } from "ruler-components";

export function WelcomeCard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome to your workspace</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <Alert
          variant="success"
          title="Your profile is ready"
          description="You can start inviting your team."
        />
        <Button onClick={() => console.log("Invite team")}>Invite team</Button>
      </CardContent>
    </Card>
  );
}

Common examples

Buttons

import { Button } from "ruler-components";

<Button variant="primary" size="md">Save changes</Button>
<Button variant="outline" size="sm">Cancel</Button>
<Button variant="ghost" disabled>Delete</Button>

Button variants: primary, white, outline, and ghost. Sizes: sm, md, and lg.

Form fields

import { Field, Input, Label, Switch } from "ruler-components";

<Field>
  <Label htmlFor="email">Work email</Label>
  <Input id="email" type="email" placeholder="[email protected]" />
</Field>

<Switch checked={enabled} onCheckedChange={setEnabled} />

In addition to Input, the package offers InputStandard, InputFilled, InputUnderline, InputFloating, InputSearch, InputPassword, InputAddon, InputIcon, InputOTP, and InputAutocomplete.

Modal

import {
  Modal,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalTitle,
  ModalTrigger,
} from "ruler-components";

<Modal>
  <ModalTrigger>Open settings</ModalTrigger>
  <ModalContent>
    <ModalHeader>
      <ModalTitle>Workspace settings</ModalTitle>
    </ModalHeader>
    <p>Configure your workspace preferences here.</p>
    <ModalFooter>Save changes</ModalFooter>
  </ModalContent>
</Modal>

Data table

DataTable includes client-side search, sorting, optional filters, and pagination.

import { DataTable, type DataTableColumn } from "ruler-components";

type Member = { name: string; role: string; projects: number };

const columns: DataTableColumn<Member>[] = [
  { key: "name", header: "Name", sortable: true },
  { key: "role", header: "Role", filterOptions: ["Admin", "Member"] },
  { key: "projects", header: "Projects", sortable: true, align: "right" },
];

<DataTable data={members} columns={columns} pageSize={10} />;

Theming

ruler.ui uses a .dark class for dark mode. Add it to an ancestor—normally the document <html> element—to switch the visual theme.

import { ThemeProvider, useTheme } from "ruler-components";

function ThemeButton() {
  const { theme, setTheme } = useTheme();

  return (
    <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
      Switch theme
    </button>
  );
}

export function App() {
  return (
    <ThemeProvider defaultTheme="light">
      <ThemeButton />
    </ThemeProvider>
  );
}

ThemeProvider saves the chosen theme in local storage and a ruler-ui-theme cookie, then updates the .dark class on the document root. You can also manage the class yourself if you already use another theme solution.

Development

This repository also contains the documentation site.

npm install
npm run dev

Open http://localhost:3000 to view it locally.

To create the distributable package and CSS bundle:

npm run build:lib

LinkedIn post template

I’m excited to share ruler.ui — a React component library I built to make it easier to create consistent, polished product interfaces.

ruler.ui includes reusable TypeScript components for forms, buttons, modals, data tables, navigation, feedback, and loading states. It also supports light and dark themes, so teams can move from idea to interface without rebuilding the same UI patterns each time.

The goal is simple: provide a practical, flexible component foundation that helps developers ship faster while maintaining a cohesive user experience.

Highlights: • Built with React, TypeScript, and Tailwind CSS • Ready-to-use components for everyday product UI • Typed APIs and customizable className support • Light/dark theme support • Open-source under the MIT license

I’d love feedback from designers and developers—especially on the components you would want to see next. #React #TypeScript #TailwindCSS #OpenSource #UIDesign #WebDevelopment

License

Distributed under the MIT License.