@onlinefreecv/design-system

A modular, type-safe, and themeable UI component library built with React, Formik, and Vanilla Extract. Designed to accelerate development and ensure consistency across the OnlineFreeCV platform.

📦 Installation

npm install @onlinefreecv/design-system
# or
yarn add @onlinefreecv/design-system

🚀 Features

• Composable UI Components: Reusable components like Section, Experience, Education, Projects, and Socials.
• Formik Integration: Seamless form state management with validation support.
• TypeScript Support: Fully typed components for enhanced developer experience.
• Vanilla Extract Styling: Scoped, themeable, and zero-runtime CSS-in-TypeScript.
• Storybook Documentation: Interactive component explorer and documentation.

📚 Documentation & Live Preview

Explore the full component library and documentation:

👉 Storybook – OnlineFreeCV Design System

🧱 Components Overview

• Section: A generic container for grouping related content.
• ExperienceSection: Manage and display professional experiences.
• EducationSection: Showcase educational background.
• ProjectsSection: Highlight personal or professional projects.
• Socials: Add and manage social media links with tag-style inputs.

Each component is designed with accessibility and customization in mind, ensuring adaptability to various use cases.

🛠️ Usage Example

Here's a basic example of how to use the Section component:

import { Section } from '@onlinefreecv/design-system';

function App() {
  return (
    <Section title="My Section">
      <p>This is a customizable section.</p>
    </Section>
  );
}

For more detailed examples and component variations, refer to the Storybook documentation.

🧪 Development & Testing

To run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

To build the project:

npm run build
# or
yarn build
# or
pnpm build

To run storybook:

npm run storybook
# or
yarn storybook
# or
pnpm storybook

📄 License

This project is licensed under the MIT License.

👤 Author

• Liaqat Saeed
  • Linkedin
  • GitHub

🤝 Contributing

Contributions are welcome! Please open an issue or submit a pull request for any enhancements or bug fixes.