Arc
A collection of reusable React components and interaction patterns for the interfaces I build.
Arc is a React + Tailwind CSS component library that brings together the UI building blocks I reuse across my projects. It focuses on practical components, consistent styling, and small interaction details, while leaving page layout and product decisions to the application.
👉 Explore the components in Storybook 👈
Features
- Reusable UI building blocks: Buttons, inputs, cards, menus, dropdowns, selects, switches, tags, modals, and more.
- Interaction-focused components: Long-press and double-click buttons, preview cards, typing animation, a configurable grid loader, and hash navigation helpers.
- Themed styling: Built with React and Tailwind CSS, with shared design tokens and light and dark theme styles.
- Composable components: Use the components as parts of your interface without handing over control of your page layout.
- Interactive examples: Browse component examples and states in Storybook.
Installation
npm install @febkosq8/arc
# or
pnpm add @febkosq8/arc
Usage
Import Arc's stylesheet from your application CSS:
@import "@febkosq8/arc/styles.css";
Arc's stylesheet registers its compiled components with Tailwind CSS v4, so their utility classes are generated automatically without an application-level @source directive.
Import components from the package:
import { Button, GridLoader } from "@febkosq8/arc";
export function Example() {
return (
<>
<Button>Save</Button>
<GridLoader rows={3} columns={3} label="Saving" />
</>
);
}
Explore the project
Arc is primarily built to meet my own projects' needs. It's shared publicly for anyone who might find the code useful, but it isn't intended as a polished, general-purpose replacement for a larger UI framework.