Rider UI

A modern, accessible, and customizable React component library built with TypeScript and Tailwind CSS.

Installation

npm install @rider-ui/react
# or
pnpm add @rider-ui/react
# or
yarn add @rider-ui/react

Quick Start

1. Import styles in your app entry point:

import '@rider-ui/react/styles.css';

2. Wrap your app with RiderProvider:

import { RiderProvider } from '@rider-ui/react';

function App() {
  return (
    <RiderProvider defaultTheme="system">
      <YourApp />
    </RiderProvider>
  );
}

3. Start using components:

import { Button, Card, Input } from '@rider-ui/react';

function MyComponent() {
  return (
    <Card padding="md">
      <Input placeholder="Enter your email" />
      <Button variant="primary">Subscribe</Button>
    </Card>
  );
}

Features

• 50+ Components - Primitives, feedback, overlays, navigation, layout, and pre-built blocks
• Dark Mode - Built-in dark mode support with system preference detection
• Fully Typed - Complete TypeScript support with exported types
• Accessible - WCAG 2.1 compliant with proper ARIA attributes
• Customizable - CSS variables for easy theming
• Tree Shakeable - Only import what you use

Components

Primitives

• Button, Input, Textarea, Label
• Checkbox, Radio, Switch, Select, Slider

Feedback

• Alert, Badge, Progress, Spinner, Skeleton, Toast

Overlay

• Modal, Drawer, Tooltip, Popover, DropdownMenu, AlertDialog

Navigation

• Navbar, Sidebar, Tabs, Breadcrumb, Pagination, Stepper

Layout

• Card, Container, Stack, Grid, Divider, Accordion, Avatar

Data

• Table (with Header, Body, Row, Cell, etc.)

Pre-built Blocks

• LoginForm, DashboardLayout, Hero, Features, Pricing, CTA, Footer, MetricCards

Theming

Customize colors using CSS variables:

:root {
  --rider-primary: 245 82% 67%;
  --rider-background: 0 0% 100%;
  --rider-foreground: 224 71% 4%;
  /* ... more variables */
}

Hooks

• useTheme() - Access and control theme
• useMediaQuery() - Responsive breakpoints
• useDisclosure() - Open/close state management
• useClickOutside() - Detect clicks outside elements
• useKeyboard() - Keyboard event handling
• useDebounce() - Debounce values
• useLocalStorage() - Persist state

License

MIT