https://github.com/dherault/honorable

🙏 A UI library for implementing any design system in React
https://github.com/dherault/honorable

components design-system library react

Last synced: 8 days ago
JSON representation

🙏 A UI library for implementing any design system in React

• Host: GitHub
• URL: https://github.com/dherault/honorable
• Owner: dherault
• License: mit
• Created: 2022-04-03T16:32:58.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-03-25T14:52:07.000Z (8 months ago)
• Last Synced: 2024-10-26T03:16:54.564Z (11 days ago)
• Topics: components, design-system, library, react
• Language: TypeScript
• Homepage: https://honorable.design
• Size: 19.9 MB
• Stars: 9
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Honorable

🙏 Implement any design system in React

- [Website](https://honorable.design)

- [Documentation](https://docs.honorable.design)

- [Storybook](https://storybook.honorable.design)

## Motivation

Built with speed and developer experience in mind, \

Honorable offers a **non-opinionated API** yet extensible with **your own conventions**, for creating React apps with ease. It comes with x+ components that are entirely and easily **themable**.

```jsx

// Import any HTML tag, capitalized

import { Div } from 'honorable'

function Component() {

  // Apply styles directly to the component

  // Nothing to remember, appart from good old CSS

  return (

    


  )

}

```


The point is to create a front-end library that fits to your coding style by extending it your way:

```jsx

// You can declare your own conventions to create your own style:

return (

  


)

```


## Installation

`npm i --save honorable honorable-theme-default @emotion/react @emotion/styled`

## Usage

```jsx

import { CssBaseline, ThemeProvider, mergeTheme } from 'honorable'

import defaultTheme from 'honorable-theme-default'

const theme = mergeTheme(defaultTheme, {

  // your theme goes here

})

function App() {

  return (

    

      

      {/* Your application lives here */}

    

  )

}

```

## Contributing

Yes, thank you. You can contribute to this project by making a pull request or opening an issue.

## License

MIT