@brifui/components NPM

BrifUI

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

For complete installation guide, visit our documentation website.

Quick Start

import { Button } from "@brifui/components";

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: