BrifUI

A modern, accessible React UI component library built with Panda CSS and Radix UI.

Features

• 🧱 Brutalist Design: Honest, raw aesthetic with functional simplicity
• 🌈 Modern Design System: Beautiful, consistent UI components - powered by PandaCSS
• ♿ Accessibility: WCAG 2.1 compliant components - powered by RadixUI
• 🎨 Customizable: Fully customizable with Panda CSS
• 🔍 TypeScript: Full type support
• 📦 Modular: Import only what you need
• 🌐 SSR Compatible: Works with Next.js and other SSR frameworks
• 🌙 Dark Mode: Built-in support for light and dark themes

Installation

# With npm
npm install @brifui/react

# With yarn
yarn add @brifui/react

# With pnpm
pnpm add @brifui/react

Quick Start

import { Button } from '@brifui/react';

function App() {
  return (
    <Button variant="primary">
      Click me
    </Button>
  );
}

Documentation

For complete documentation, visit our documentation website.

Components

BrifUI includes a wide range of components:

• Inputs: Button, Checkbox, Radio, Select, Slider, Switch, TextField
• Navigation: Breadcrumb, Link, Menu, Pagination, Tabs
• Data Display: Accordion, Avatar, Badge, Card, Table, Tag
• Feedback: Alert, Dialog, Progress, Spinner, Toast
• Layout: Box, Flex, Grid, Stack
• Overlay: Drawer, Modal, Popover, Tooltip

... And many more.

Contributing

We welcome contributions! Please see our Contributing Guide for details.

Project Structure

docs/                  # Documentation website
packages/
  ├── cli/             # @brifui/cli package
  ├── components/      # Component monorepo
  │    ├── accordion/  # Individual component packages
  │    ├── button/
  │    └── ...
  ├── entry/           # Entrypoint of the library
  ├── postcss/         # @brifui/postcss package
  ├── styled/          # @brifui/styled package
  ├── theme/           # @brifui/theme package
  ├── types/           # @brifui/types package
  └── utils/           # @brifui/utils package

Development

To set up the development environment:

# Clone the repository
git clone https://github.com/yourorg/brif-ui.git
cd brif-ui

# Install dependencies
yarn

# Start development environment
yarn dev

Run the test suite with:

yarn test

License

MIT