A modern React component library built with TypeScript, Tailwind CSS, and Radix UI primitives. Transitioned from Chakra UI to a shadcn/ui-based architecture for better customization and performance.
- React ^19.0.0
- React DOM ^19.0.0
- Tailwind CSS ^4.0.0
https://future-house.github.io/feathers/
npm install @future-house/feathers
# or from GitHub
npm install https://github.com/future-house/feathers#mainAdd Feathers components to your tailwind.config.ts content paths:
export default {
content: [
// ... your app's paths
'./node_modules/@future-house/feathers/dist/**/*.{js,ts,jsx,tsx}',
],
// ... rest of your config
};Import the component styles in your app's entry point:
import '@future-house/feathers/dist/index.css';Include the required fonts in your HTML <head>:
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
rel="stylesheet"
/>Note: Helvetica Neue is a system font and doesn't require importing. It's automatically available on macOS/iOS with fallbacks to Helvetica and Arial on other platforms.
import { Button, Card, Typography } from '@future-house/feathers';
function App() {
return (
<Card>
<Typography variant="h1">Welcome</Typography>
<Button>Get Started</Button>
</Card>
);
}npm install
npm run storybookStorybook runs on http://localhost:6006 and provides:
- Interactive component playground
- Component documentation and props
- Different states and variations
npm run build # Production build
npm run dev # Development mode
npm run lint # ESLint checking
npm run format # Prettier formatting
npm run typecheck # TypeScript checking
npm test # Run testsBuilt with:
- Radix UI - Accessible, unstyled UI primitives
- Tailwind CSS - Utility-first styling
- shadcn/ui - Component patterns and styling
- Carbon Icons - Icon library
- TypeScript - Full type safety