@youngonesworks/ui
v0.1.134
Published
A Youngones UI component library
Readme
@youngonesworks/ui
A comprehensive React component library built with Tailwind CSS v4, featuring modular CSS variables and TypeScript support.
Features
- 🧩 React components built with TypeScript
- 🎨 Styled with Tailwind CSS v4
- 📦 Modular CSS exports - Import only what you need
- 🔤 Font-agnostic design – Works seamlessly with app-level fonts (e.g. Work Sans via Google Fonts)
- 🎯 CSS Variables & Utilities - Exportable design tokens
- 🌳 Tree-shakeable - Only import what you need
- 📝 Full TypeScript support - Type-safe CSS variable helpers
- ⚡ Modern build - Rolldown (Rust-based bundler)
Installation
# yarn
yarn add @youngonesworks/ui
# npm
npm install @youngonesworks/ui
### Peer Dependencies
- **react**: ^18 || ^19
- **react-dom**: ^18 || ^19
- **next**: ^14 || ^15 _(for Next.js projects)_
### Tailwind CSS v4 setup
```bash
yarn add -D tailwindcss@4 postcss autoprefixer
yarn tailwindcss init -pUpdate tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
"./node_modules/@youngonesworks/ui/**/*.{js,jsx,ts,tsx}",
],
theme: { extend: {} },
plugins: [],
};Usage
🧩 React Components
import { Button } from "@youngonesworks/ui";
function App() {
return (
<>
<Button>Default</Button>
<Button variant="secondary" size="sm">
Small Secondary
</Button>
<Button variant="outline" size="lg">
Large Outline
</Button>
</>
);
}🎨 CSS Variables & Utilities
Import CSS Variables
/* Import in your CSS file */
@import "@youngonesworks/ui/styles/variables.css";
@import "@youngonesworks/ui/styles/utilities.css";
.my-component {
color: var(--color-primary); /* #10d1bb */
font-family: var(--font-family-sans); /* App-defined sans font */
font-size: var(--font-lg-size); /* 1.125rem */
transition: var(--transition-duration-sidebar);
}🔤 Next.js Fonts
Setup in Next.js App Router
// app/layout.tsx
// app/layout.tsx
import { Work_Sans } from "next/font/google";
import "@youngonesworks/ui/styles/variables.css";
const workSans = Work_Sans({
subsets: ["latin"],
weight: ["300", "400", "500", "600", "700", "900"],
variable: "--font-family-sans",
});
export default function RootLayout({ children }) {
return (
<html lang="en" className={workSans.variable}>
<body>{children}</body>
</html>
);
}Use Font Utilities
// app/layout.tsx
import { Work_Sans } from "next/font/google";
import "@youngonesworks/ui/styles/variables.css";
const workSans = Work_Sans({
subsets: ["latin"],
weight: ["300", "400", "500", "600", "700", "900"],
variable: "--font-family-sans",
});
export default function RootLayout({ children }) {
return (
<html lang="en" className={workSans.variable}>
<body>{children}</body>
</html>
);
}📦 Available Exports
// Components
import { Button, Card, Input } from "@youngonesworks/ui";
// CSS files (import in CSS/SCSS)
// @import '@youngonesworks/ui/styles/variables.css';
// @import '@youngonesworks/ui/styles/utilities.css';📊 Available CSS Variables
Colors
--color-primary- Primary brand color (#10d1bb)--color-secondary- Secondary brand color--color-background- Background colors--color-foreground- Text colors
Typography
--font-family-sans- Application-defined sans font stack (e.g. Work Sans)--font-xs-sizeto--font-9xl-size- Font sizes (0.75rem - 8rem)--font-xs-lineto--font-9xl-line- Line heights
Spacing & Sizing
--spacing-*- Consistent spacing scale--sizing-*- Width/height utilities
Transitions & Animations
--transition-duration-*- Duration presets- Custom animation utilities (
.animate-spin-slow, etc.)
Components
Button
<Button
variant="primary" // 'primary' | 'secondary' | 'outline'
size="md" // 'sm' | 'md' | 'lg'
onClick={() => console.log("clicked")}
>
Click me
</Button>🚀 Development
Setup
git clone https://github.com/youngonesworks/ui.git
cd ui
yarn installAvailable Scripts
# Development
yarn dev # Start Storybook development server
yarn watch # Watch and build library
# Building
yarn build # Build library for production
yarn build-storybook # Build Storybook for deployment
# Publishing
yarn buildAndPublish # Build and publish to npm
# Code Quality
yarn lint # ESLint
yarn lint:fix # Auto-fix ESLint issues
yarn format # Prettier formatting
yarn test # Run Jest testsProject Structure
src/
├── components/ # React components
├── styles/ # Modular CSS files
├── variables.css # CSS custom properties
├── utilities.css # Utility classes
└── fonts.css # Font-face declarations
├── theme/ # TypeScript theme utilities
├── variables.ts # CSS variable helpers
├── fonts.ts # Next.js font configuration
└── index.ts # Theme exports
└── index.ts # Main entry pointContributing
Contributions are welcome! Please follow these guidelines:
- Fork the repository and create a feature branch
- Follow conventional commits spec for commit messages
- Add tests for new components or utilities
- Update documentation including README and Storybook stories
- Ensure all checks pass (lint, format, test, build)
- Submit a PR with a clear description
CSS Variables
When adding new CSS variables:
- Add them to
src/styles/variables.css - Document them in this README
License
ISC License - see LICENSE file for details.