Orbit UI

A premium, accessible React UI component library built with Tailwind CSS and Radix UI. Inspired by shadcn/ui but designed for ease of use as a standalone package.

Features

• 🎨 Beautifully Designed: Clean, modern aesthetics with a focus on typography and spacing.
• ♿ Accessible: Built on top of Radix UI primitives for full WAI-ARIA compliance.
• 🛠️ Customizable: Powered by Tailwind CSS for easy styling and configuration.
• 📦 Treeshakable: Individual components can be imported to keep bundle sizes small.

Installation

npm install orbit-ui

Requirements

Orbit UI requires React 18+ and Tailwind CSS to be installed in your project.

Setup

1. Configure Tailwind CSS

Add Orbit UI's components to your tailwind.config.js to ensure the styles are correctly applied:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/orbit-ui/dist/**/*.{js,ts,jsx,tsx}", // Add this line
  ],
  theme: {
    extend: {},
  },
  plugins: [require("tailwindcss-animate")],
}

2. Import Styles

Import the global styles in your main entry file (e.g., main.tsx or _app.tsx):

import "orbit-ui/dist/index.css";

Usage

import { Button, Input, Card } from "orbit-ui"

export default function App() {
  return (
    <Card className="p-6">
      <h1 className="text-2xl font-bold mb-4">Hello Orbit!</h1>
      <Input placeholder="Type something..." className="mb-4" />
      <Button variant="default" size="lg">
        Click me
      </Button>
    </Card>
  )
}

Components

Orbit UI includes a variety of pre-styled components:

• Button
• Input
• Select
• Checkbox
• Radio Group
• Dialog
• Alert Dialog
• Alert
• Toast
• Textarea
• Label
• Card
• Badge
• Switch

Development

# Install dependencies
npm install

# Build the library
npm run build

# Run development server
npm run dev

License

MIT © Balachandar