Falcorp Design System

A comprehensive React component library built with TypeScript, Tailwind CSS 4, and Radix UI primitives. 50+ production-ready components with full accessibility support and shadcn/ui compatibility.

🚀 Installation

Option 1: Install as NPM Package

npm install @falcorp/ui-react

Then import and use components:

import { Button, Input, Card } from '@falcorp/ui-react'
import '@falcorp/ui-react/styles'

function App() {
  return (
    <Card>
      <Input placeholder="Enter text..." />
      <Button>Submit</Button>
    </Card>
  )
}

Option 2: Install via shadcn CLI

Quick Install (Direct URL)

# Add individual components to your project
npx shadcn@latest add https://falcorp-ui.vercel.app/r/button.json

Registry Configuration (Recommended)

Add the Falcorp UI registry to your components.json:

{
  "registries": {
    "@falcorp-ui": "https://falcorp-ui.vercel.app/r/{name}.json"
  }
}

Then install components using the namespace syntax:

npx shadcn@latest add @falcorp-ui/button
npx shadcn@latest add @falcorp-ui/data-grid
npx shadcn@latest add @falcorp-ui/card

Multiple Components

# Install multiple components at once
npx shadcn@latest add @falcorp-ui/button @falcorp-ui/input @falcorp-ui/card

🧩 Components

Core UI (40+ components)

Button, Input, Card, Badge, Alert, Dialog, Dropdown Menu, Form, Table, Tabs, Calendar, Progress, Sidebar, and more...

Advanced Components

• Data Grid - Full-featured table with sorting, filtering, pagination, and drag-and-drop
• File Upload - Drag & drop upload with preview and progress tracking
• Kanban Board - Interactive drag-and-drop task management
• Multi Select - Advanced select with search and tagging

Utilities & Hooks

• cn() - Class merging utility with Tailwind support
• use-mobile - Responsive breakpoint detection
• use-copy-to-clipboard - Clipboard operations with feedback

� Usage Examples

Basic Components

import { Button, Input, Card, CardContent, CardHeader, CardTitle } from '@falcorp/ui-react'

<Card className="w-96">
  <CardHeader>
    <CardTitle>Login Form</CardTitle>
  </CardHeader>
  <CardContent>
    <Input placeholder="Email" type="email" />
    <Input placeholder="Password" type="password" />
    <Button className="w-full">Sign In</Button>
  </CardContent>
</Card>

Data Grid

import { DataGrid } from '@falcorp/ui-react'

<DataGrid
  data={users}
  columns={columns}
  searchable
  sortable
  filterable
  pagination
/>

Form with Validation

import { useForm } from 'react-hook-form'
import { Form, FormControl, FormField, FormItem, FormLabel, Button } from '@falcorp/ui-reacti'

const form = useForm()

<Form {...form}>
  <FormField
    control={form.control}
    name="username"
    render={({ field }) => (
      <FormItem>
        <FormLabel>Username</FormLabel>
        <FormControl>
          <Input placeholder="Enter username" {...field} />
        </FormControl>
      </FormItem>
    )}
  />
  <Button type="submit">Submit</Button>
</Form>

�️ Development

npm install          # Install dependencies
npm run dev          # Start development server
npm run storybook    # Launch component documentation
npm run build:lib    # Build library for distribution

🎯 Features

• TypeScript First - Full type safety and IntelliSense support
• Accessibility - WCAG 2.1 AA compliant with Radix UI primitives
• Customizable - CSS variables and class variance authority for theming
• Modern Stack - React 19, Vite, Tailwind CSS 4
• shadcn Compatible - Works seamlessly with shadcn/ui projects
• Tree Shakeable - Import only what you need

📚 Documentation

• Storybook - Interactive component playground
• Registry Setup - Complete shadcn/ui integration guide
• Component API - Full component documentation

📄 License

MIT License