@rcigroup/horizon-component-sdk
v0.1.4
Published
A React UI component library built on [shadcn/ui](https://ui.shadcn.com), [Radix UI](https://www.radix-ui.com/), and [Tailwind CSS v4](https://tailwindcss.com/).
Readme
@rcigroup/horizon-sdk
A React UI component library built on shadcn/ui, Radix UI, and Tailwind CSS v4.
Installation
npm install @rcigroup/horizon-sdkPeer Dependencies
Ensure your project has the following peer dependencies installed:
npm install react react-dom tailwindcss@4Setup
1. Import the theme styles
Add the Horizon theme CSS to your main stylesheet after the Tailwind import:
/* app.css or main.css */
@import "tailwindcss";
@import "@rcigroup/horizon-sdk/styles.css";2. Configure Tailwind to scan the library
Add a @source directive so Tailwind picks up the class names used by the components:
/* app.css or main.css */
@import "tailwindcss";
@source "../node_modules/@rcigroup/horizon-sdk/dist";
@import "@rcigroup/horizon-sdk/styles.css";3. Dark mode
The components support dark mode via a .dark class on a parent element (typically <html>). Toggle it however you prefer.
Usage
import { Button } from "@rcigroup/horizon-sdk"
export function App() {
return <Button variant="outline">Click me</Button>
}Available Components
Accordion, Alert, AlertDialog, AspectRatio, Avatar, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Chart, Checkbox, Collapsible, Combobox, Command, ContextMenu, Dialog, Direction, Drawer, DropdownMenu, Empty, Field, HoverCard, Input, InputGroup, InputOTP, Item, Kbd, Label, Menubar, NativeSelect, NavigationMenu, Pagination, Popover, Progress, RadioGroup, Resizable, ScrollArea, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Sonner, Spinner, Switch, Table, Tabs, Textarea, Toggle, ToggleGroup, Tooltip
Development
# Run the dev app
npm run dev
# Run Storybook
npm run storybook
# Build the library
npm run build
# Type-check
npm run typecheck