A minimalist component library inspired by the raw beauty of Pernambuco's clay art and culture — focused on dark mode, organic textures, and elegant typography.
“A raw shape molded in darkness.”
- 🌑 Dark mode by default with organic textures
- 🎨 Component-first system built with Tailwind CSS v4
- ⚙️ Written in TypeScript and React 19
- 🌫️ Visual language inspired by texture and materiality
- ✨ Framer Motion animations and micro-interactions
- 📚 Storybook integration for component development and documentation
- 🧪 Vitest for comprehensive testing
- 🚀 Vite for lightning-fast development and building
- 🔧 ESLint and Prettier for code quality
- 🪝 Husky pre-commit hooks
- 🤖 GitHub Actions for automated Storybook deployment
- 🧩 Designed to evolve into a complete, reusable design system
# npm
npm install barro-ui
# yarn
yarn add barro-ui
# pnpm
pnpm add barro-uiMake sure you have React 19+ installed:
npm install react@^19.0.0 react-dom@^19.0.0Add the CSS import to your global styles file:
/* styles/globals.css */
@import 'barro-ui/css';Or import in your main app file:
// main.tsx or layout.tsx
import 'barro-ui/css';import { Card, PostItem, Spinner, TextUnderline } from 'barro-ui';
export function App() {
return (
<Card>
<h1>Welcome to Barro UI</h1>
<TextUnderline href="#">Learn more</TextUnderline>
</Card>
);
}Barro UI is built with Tailwind CSS v4 and includes its own design tokens. The components use CSS custom properties that can be customized:
:root {
/* Override Barro UI design tokens */
--background-color: #your-color;
--text-color: #your-color;
/* ... other custom properties */
}Most components accept className or similar props for custom styling:
<Card className="shadow-lg border-2">
<TextUnderline className="text-blue-500 hover:text-blue-700">Custom styled link</TextUnderline>
</Card>- Clone this repository
- Install dependencies using
pnpm install - Start development with
pnpm dev
dev: Starts the local Storybook server — use this to develop and preview your componentstest: Runs all tests with Vitesttest:watch: Runs tests in watch modebuild: Builds Storybook as a static web applicationbuild:lib: Builds the component library with Vitelint: Runs ESLint to find and fix code problemsformat: Formats code with Prettier
- Vite + React 19 + TypeScript setup
- Tailwind CSS v4 integration
- Storybook configuration
- Testing setup with Vitest
- Code quality tools (ESLint, Prettier, Husky)
- GitHub Actions for deployment
- NPM package configuration with dual exports (ESM/CJS)
- TypeScript declaration files generation
- Dark mode support with organic textures
- Custom color palette (inspired by clay, bronze and soil)
- Design tokens (colors, typography, spacing)
- Subtle noise background textures
- Framer Motion animations
- Card component with loading states
- PostItem component for content display
- Spinner component
- TextUnderline component with animations
- Button component variants
- Accessibility audit and improvements
- Complete design documentation
- Form components (Input, Textarea, Select)
- Navigation components
- Modal/Dialog components
- Layout components (Container, Grid)
- Data display components (Table, List)
- Feedback components (Toast, Alert)
Inspired by clay, terracotta and natural textures
- Aesthetics rooted in Pernambuco's crafts and visual heritage
- Typography focused on readability and organic form
- Dark-first approach with earthy, warm accents
- Emphasis on materiality and tactile feeling
Barro means clay in Portuguese — the primal material of design: shaped by hand, rooted in culture, and built with intention.
MIT — by @ricardogouveia3
Built with ❤️ using Vite, React, TypeScript and Tailwind CSS. Created with Vite React Component Library Starter