Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

Overview

lerna

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.


Orbit Mission

Orbit aims to bring order and consistency to all of our products and processes. We elevate user experience and increase the speed and efficiency of how we design and build products.

Installation

orbit-components are served as an npm package.

Add them to your project by running:

// with npm
npm install @kiwicom/orbit-components

// with yarn
yarn add @kiwicom/orbit-components

Don't forget to install the styled-components ^4.0.0 also.

Usage

  1. Import fonts that are used in orbit-components:
">
<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700"
  rel="stylesheet"
/>

Or via CSS:

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700");
  1. Include any of our components in your project and use it:
Hello World!; ">
import Alert from "@kiwicom/orbit-components/lib/Alert";

<Alert>Hello World!</Alert>;

If you want to use custom theme or dictionary inside your project, it's necessary to wrap your app into . See this document for more information.

For live preview check out Storybook or orbit.kiwi.

You can also try orbit-components live on CodeSandbox.

Types

Orbit comes with both Flow and Typescript definitions files, so you can choose what fits your project. However, if you work with Typescript, you need to add type for styled-components.

// with npm
npm install @types/styled-components --save-dev

// with yarn
yarn add @types/styled-components -D

Main Sections:

Contributing

We are working on making this project a fully open source. We appreciate any contributions you might make.

Bug reports and feature request are welcome but, please use the correct template.

Please check out our Contribution Guide. It includes contribution guidelines and information on how to run and develop the project.

Feedback

We want to provide only components of the highest quality. We can’t do that without your feedback. If you have any suggestions about what we can do to improve components, please report it directly as an issue or write to us at #orbit-components on Slack.

Issues
  • Added value prop to checkbox

    Added value prop to checkbox

    closes #103

    This Pull Request meets the following criteria:

    • [x] Tests have been added/adjusted for my new feature
    • [x] New Components are registered in index.js of my project
    opened by prztrz 16
  • UPDATE: Relaxed country props in CountryFlag

    UPDATE: Relaxed country props in CountryFlag

    Accept nullable string as code prop. Fallback to "anywhere" on unknown country code.

    This Pull Request meets the following criteria:

    • [x] Tests have been added/adjusted for my new feature


      LiveURL: https://orbit-components-relaxed-country-flag.surge.sh
    Review needed 
    opened by michalsanger 13
  • Add Storyshots

    Add Storyshots

    Make sure these boxes are ticked before submitting a new issue:

    • [x] I have checked that this is not a duplicate
    • [x] I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

    We should automatically create snapshots from Storybook to prevent Storybook breaking.

    https://github.com/storybooks/storybook/tree/master/addons/storyshots

    Enhancement Global 
    opened by fallion 13
  • Create <Button /> component

    Create

    Description

    The button is a simple component when we use for showing what actions users can do on the page.

    Visual style

    Parameters

    Parameter | Values | Default -- | -- | -- Style | Primary, Secondary, Link, Facebook, Google, Destructive | Primary Size | Large, Normal, Small | Normal Icon | [string] | empty Label | [string] | Your label Bordered | [boolean] | false Disabled | [boolean] | false Loading | [boolean] | false Width | [string] | auto

    Visual design & design tokens

    For all configurations

    font-family: $fontFamily
    border-radius: $borderRadiusNormal
    font-weight: $fontWeightBold
    min-width: $widthButtonMinimal
    

    Additional information

    • Vertical centering for icon and text label
    • For all buttons, there should be a transition for changing states (for background color and scale properties)
    • Borders in bordered version are inside the button, so the height of the button stays same
    • Width is usually calculated automatically (based on length of label + icon width + paddings). However, it should be possible to set up width manually so there is a chance to have two same-width buttons when placed near each other.
    • All buttons should disable all the default browser styling so it doesn’t mess with our own visual style (http://www.456bereastreet.com/i/button_d.png)

    Based on selected configuration:

    Parameter:Value | property: $token -- | -- Style:Primary | text color: $colorTextButtonPrimary
    icon color: $colorIconButtonPrimary
    background: $backgroundButtonPrimary

    For bordered version:
    text color: $colorTextButtonPrimaryBordered
    icon color: $colorIconButtonPrimaryBordered
    background: $backgroundButtonBordered
    border-color: $borderColorButtonPrimaryBordered Style:Secondary | text color: $colorTextButtonSecondary
    icon color: $colorIconButtonSecondary
    background: $backgroundButtonSecondary

    For bordered version:
    text color: $colorTextButtonSecondaryBordered
    icon color: $colorIconButtonSecondaryBordered
    background: $backgroundButtonBordered
    border-color: $borderColorButtonSecondaryBordered Style:Link | text color: $colorTextButtonLink
    icon color: $colorIconButtonLink
    background: $backgroundButtonLink

    For bordered version:
    N/A (there is no bordered version for this so if someone enable this style together with “bordered”, we'll just ignore it?) Style:Facebook | text color: $colorTextButtonFacebook
    icon color: $colorIconButtonFacebook
    background: $backgroundButtonFacebook

    For bordered version:
    text color: $colorTextButtonFacebookBordered
    icon color: $colorIconButtonFacebookBordered
    background: $backgroundButtonBordered
    border-color: $borderColorButtonFacebookBordered Style:Google | text color: $colorTextButtonGoogle
    icon color: $colorIconButtonGoogle
    background: $backgroundButtonGoogle

    For bordered version:
    text color: $colorTextButtonGoogleBordered
    icon color: $colorIconButtonGoogleBordered
    background: $backgroundButtonBordered
    border-color: $borderColorButtonGoogleBordered Style:Destructive | text color: $colorTextButtonDestructive
    icon color: $colorIconButtonDestructive
    background: $backgroundButtonDestructive

    For bordered version:
    text color: $colorTextButtonDestructiveBordered
    icon color: $colorIconButtonDestructiveBordered
    background: $backgroundButtonBordered
    border-color: $borderColorButtonDestructiveBordered Size:Large | font-size: $fontSizeTextLarge
    height: $heightButtonLarge
    padding-left: $paddingButtonLarge
    padding-right: $paddingButtonLarge

    When button has icon:
    padding-left: $paddingButtonLargeWithIcon

    Styles for inserted icon:
    height: $heightIconMedium
    width: $widthtIconMedium
    margin-right: $marginButtonIconLarge Size:Normal | font-size: $fontSizeTextNormal
    height: $heightButtonNormal
    padding-left: $paddingButtonNormal
    padding-right: $paddingButtonNormal

    When button has icon:
    padding-left: $paddingButtonNormalWithIcon

    Styles for inserted icon:
    height: $heightIconMedium
    width: $widthtIconMedium
    margin-right: $marginButtonIconNormal Size:Small | font-size: $fontSizeTextSmall
    height: $heightButtonSmall
    padding-left: $paddingButtonSmall
    padding-right: $paddingButtonSmall

    When button has icon:
    padding-left: $paddingButtonSmallWithIcon

    Styles for inserted icon:
    height: $heightIconSmall
    width: $widthtIconSmall
    margin-right: $marginButtonIconSmall Loading:true | Nothing so special, it's basically just a button with specific icon. For this, we'll use animated icon from our old button: Loading button in storybook

    Pre-defined configurations

    There is few combination we can predefine. All this configuration matches names and look for Sketch symbols from our Orbit UI kit. It should also help with handing designs over to product teams.

    This gives us also possibility that for eg. when we change the default icon for a destructive button will be “cross” instead of “remove”, that we don’t need to go through all instances and change it everywhere. We just change that pre-defined configuration for “Destructive button” have “icon” parameter set to “cross” and it’ll change everywhere.

    Type | Pre-defined parameters | Usually working with -- | -- | -- Primary button | Style: Primary
    Size: Normal | Size
    Label
    Disabled
    Loading Primary button with icon | Style: Primary
    Size: Normal
    Icon: “plus-circle” | Size
    Label
    Disabled
    Loading Secondary button | Style: Secondary
    Size: Normal | Size
    Label
    Icon
    Disabled
    Loading Secondary button with icon | Style: Secondary
    Size: Normal
    Icon: “plus-circle” | Size
    Label
    Icon
    Disabled
    Loading Destructive | Style: Destructive
    Size: Normal
    Icon: “remove” | Size
    Label
    Disabled
    Loading Destructive Light | Style: Destructive
    Size: Small
    Bordered: true
    Icon: “remove” | Size
    Label
    Disabled
    Loading Facebook | Style: Facebook
    Size: Normal
    Icon: “facebook” | Size
    Label
    Disabled
    Loading Google | Style: Google
    Size: Normal
    Icon: “google” | Size
    Label
    Disabled
    Loading Button Link | Style: Link
    Size: Small
    Icon: “plus-circle” | Size
    Label
    Disabled
    Loading

    Of course that is possible to define custom configuration but it won’t be recommended and if we decide that we need to use eg. light variants of our buttons more, we can always add another pre-defined state.

    Hover & active button states

    You can check interactions on this link, Version 5 is the one we choosed: https://codepen.io/darkwindcz/pen/mxJmbP

    When are buttons hovered, we use darken() function for background colors for our button backgrounds in most cases, e.g. darken([original-color], $modifierDarkenHover). Same darken modifier is used for text and border colors when button is in “Bordered” version.

    When are buttons active, we use darken() function for background colors for our button backgrounds in most cases, e.g. darken([original-color], $modifierDarkenActive). Also, when button is active, we scale it's size down, with the css function transform: scale($modifierScaleButtonActive)

    The design token name for darkening value is not tight to buttons as we use the same token for hover state of different components (like <TextLink /> or in the future for <Chip />, etc.)

    There is one exception though. For button style “Link”, we want to use $backgroundButtonLinkHoverinstead of darkening pure white. The reason for this is that if we would use darken(#fff, 5%), it would generate gray-ish color. But in our color system, we use blue-ish versions of our gray shades. For active state of this button, we just use darken with this vaues: darken($backgroundButtonLinkHover, $modifierDarkenButtonLink).

    Hover & active states are same for all button sizes and button styles. (With exception of Link type, as mentioned above)

    Disabled state should use opacity $opacityButtonDisabled, hover styles should be disabled too so it doesn’t look like there is some interaction behind it.

    Focus state should use default browser styling (outline). It’s possible that we'll change it in the future with our own defined box-shadow, but we need to discuss this with designers.

    Some inspiration from other’s React components for button component:

    https://mineral-ui.com/components/button http://design-system.pluralsight.com/components/button/ https://seek-oss.github.io/seek-style-guide/button https://seek-oss.github.io/seek-style-guide/button (there is nice loading animation :-) https://polaris.shopify.com/components/actions/button#navigation (they have also some accessibility parameters) http://design.acl.com/component/Button (I like their naming convention for states, eg. isDisabled or isLoading)

    opened by honzatmn 12
  • feat(TypeScript): adding type definitions

    feat(TypeScript): adding type definitions

    These were originally created by @kravco in an internal project at Kiwi.com, and they have not been updated in a few months, so there might be some discrepancies.

    TODO

    • [x] Check that each type matches up against the Flow types;
    • [x] Alter the build process to include these files in the shipped NPM package

    ALTERNATIVE

    • submit these types on DefinitelyTyped and manage it there

    Components done:

    • [x] AirportIllustration
    • [x] Alert
    • [x] Badge
    • [x] Breadcrumbs
    • [x] Button
    • [x] ButtonGroup
    • [x] ButtonLink
    • [x] CallOutBanner
    • [x] Card
    • [x] CarrierLogo
    • [x] Checkbox
    • [x] ChoiceGroup
    • [x] ClickOutside
    • [x] Collapse
    • [x] CountryFlag
    • [x] Coupon
    • [x] Desktop
    • [x] Dialog
    • [x] Dictionary
    • [x] Drawer
    • [x] FeatureIcon
    • [x] FormFeedback
    • [x] FormLabel
    • [x] Heading
    • [x] Hide
    • [x] Icon
    • [x] icons
    • [x] Illustration
    • [x] InputField
    • [x] InputFile
    • [x] InputGroup
    • [x] InputStepper
    • [x] Layout
    • [x] LazyImage
    • [x] LinkList
    • [x] List
    • [x] ListChoice
    • [x] Loading
    • [x] Mobile
    • [x] Modal
    • [x] ModalFooter
    • [x] ModalHeader
    • [x] ModalSection
    • [x] NavigationBar
    • [x] NotificationBadge
    • [x] Pagination
    • [x] PictureCard
    • [x] Popover
    • [x] Portal
    • [x] PricingTable
    • [x] BadgePrimitive
    • [x] IllustrationPrimitive
    • [x] Radio
    • [x] RatingStars
    • [x] Seat
    • [x] Select
    • [x] Separator
    • [x] ServiceLogo
    • [x] SkipLink
    • [x] SkipNavigation
    • [x] Slider
    • [x] Stack
    • [x] Stepper
    • [x] StepperStateless
    • [x] Sticky
    • [x] StopoverArrow
    • [x] Table
    • [x] Tag
    • [x] Text
    • [x] Textarea
    • [x] TextLink
    • [x] ThemeProvider
    • [x] Tile
    • [x] TileGroup
    • [x] Tooltip
    • [x] Translate
    • [x] Truncate
    • [x] boundingClientRect
    • [x] cloneWithTooltip
    • [x] Grid
    • [x] handleKeyDown
    • [x] mediaQuery
    • [x] randomID
    • [x] rtl
    • [x] scroll
    • [x] Slide
    • [x] toggleDown
    • [x] toggleUp
    • [x] transition
    • [x] validateDecrement
    • [x] validateIncrement

    Template for icons:

    • [x] FeatureIcon
    • [x] Icon

    Closes #324


    LiveURL: https://orbit-components-rcsl-add-ts-definitions.surge.sh

    Enhancement Review needed Typescript 
    opened by RobinCsl 12
  • Styled Components vs Styled JSX findings

    Styled Components vs Styled JSX findings

    Aggregation of findings on this topic.

    question Global 
    opened by fallion 11
  • Create <Text /> component

    Create component

    Description

    The most basic component for rendering text blocks.

    Visual style

    body-text

    Parameters

    We should be able to render all of these styles with the combination of parameters from the table below.

    Parameter | Values | Default -- | -- | -- Style | Primary, Secondary, Attention | Primary Size | Large, Normal, Small | Normal Weight | bold, normal | normal Italic | [boolean] | false Uppercase | [boolean] | false Element | p, span, div, (anything else?) | p

    Design tokens

    For all configurations:

    font-family: $fontFamily
    line-height: $lineHeightText
    

    Based on selected configuration:

    Parameter:Value | property: $token -- | -- Style:Primary [optional] | color: $colorTextPrimary Style:Secondary [optional] | color: $colorTextSecondary Style:Attention [optional] | color: $colorTextAttention Size:Large [optional] | font-size: $fontSizeTextLarge Size:Normal [optional] | font-size: $fontSizeTextNormal Size:Small [optional] | font-size: $fontSizeTextSmall Weight:normal [optional] |font-weight: $fontWeightNormal Weight:bold [optional] | font-weight: $fontWeightBold

    Italic and uppercase don't need tokens as they aren’t expressed with numeric values.

    Possible examples of configuration:

    <Text>A) <strong>We're here for you.</strong> First, let's narrow down your request.</Text>
    <Text Element="div" Italic>B) We're here for you. First, let's narrow down your request.</Text>
    

    Rendered HTML on those configurations:

    <p>A) <strong>We're here for you.</strong> First, let's narrow down your request.</p>
    <div><em>B) We're here for you.</strong> First, let's narrow down your request.</em></div>
    

    Note: Please take this just as my component interpretation for better understanding how I meant which param. I am totally not sure about <strong> though, but it should be possible to make just part of the text bold (or link in other cases). I don’t have to include “real” code, just give me a feedback how you want to specify it and I can do it your way. I won’t be able to add these code examples to more complicated components anyway.

    Some inspiration from others React components for solving text component:

    We probably don't need to reinvent the wheel, a lot of other teams solved these basics already. I have a good collection of links with some inspiration from other design systems so I can include for every common component so we have something to study and inspire from 🙂​Hope it helps a little! I think that it should be possible to check their Github repositories, some of them can have them public.

    https://pricelinelabs.github.io/design-system/Text http://grommet.io/dxc/docs/paragraph (check Examples button on the right top) https://cloudflare.github.io/cf-ui/#cf-component-text http://design-system.pluralsight.com/components/text/ https://seek-oss.github.io/seek-style-guide/text ( + subcomponent for strong, etc.: https://seek-oss.github.io/seek-style-guide/strong) https://backpack.github.io/components/web/text

    opened by honzatmn 10
  • Support for Typescript

    Support for Typescript

    It is impossible to use this library with Typescript. It would be nice if it generated types for typescript as well, or better yet was rewritten for Typescript :D

    opened by fallion 10
  • docs(sandbox): examples adjustments

    docs(sandbox): examples adjustments

    Storybook: https://orbit-feat-sandbox-ruler.surge.sh

    opened by mainframev 10
  • Add react-axe as plugin to Storybook

    Add react-axe as plugin to Storybook

    Because of a11y reasons, it would be great to add react-axe as accessibility checker for both the production and development build.

    hacktoberfest 
    opened by vepor 9
  • fix(useLockScrolling): ensure that scroll is locked by default

    fix(useLockScrolling): ensure that scroll is locked by default

    Currently we don't merge theme given to ThemeProvider with default theme, so unless people merge it themselves, lockScrolling will be falsy and useLockScrolling will not lock scrolling. Instead of merging the given with the default theme, which might cause unexpected changes, we'll simply treat lockScrolling as true if it's not being set.

    Storybook: https://orbit-silvenon-fix-theme-lock-scrolling-default.surge.sh

    opened by silvenon 1
  • docs: little fixes

    docs: little fixes

    • fixed search button on the main page
    • fixed developer mode in overview pages (worked only via navigation items)
    • fixed bookmarks (did not work on the main page)
    • fixed heading size of when to use / when not to use (it should have other changes, but we will implement it later, since it should be as component, now it just a mdx)
    • adjusted search button in the navbar to the latest design

    Storybook: https://orbit-silvenon-docs-lil-fixes.surge.sh

    opened by mainframev 2
  • fix: colors of icons on orbit.kiwi

    fix: colors of icons on orbit.kiwi

    null

    opened by silvenon 2
  • feat: add component structure component

    feat: add component structure component

    The logic might be a little messy, I'm open to suggestions, but I added thorough tests so it should be good.

    Storybook: https://orbit-silvenon-feat-component-structure.surge.sh

    opened by silvenon 3
  • docs: add more knobs content

    docs: add more knobs content

    null

    opened by mainframev 2
  • refactor(docs): do/donts guidelines

    refactor(docs): do/donts guidelines

    null

    opened by mainframev 2
  • fix(CountryFlag): set

    fix(CountryFlag): set "undefined" as default code

    BREAKING CHANGE: The default code for CountryFlag is now "undefined" rather than "anywhere", a gray flag with a question mark. This code is also used if the given code isn't supported.

    This was meant to go in v1, but I forgot to repeat the change after reverting it, so it's scheduled for v2.

    Storybook: https://orbit-silvenon-fix-country-flag-code-undefined.surge.sh

    Breaking 
    opened by silvenon 2
  • ci: limit library size with size-limit

    ci: limit library size with size-limit

    Our current compressed size action isn't that helpful, so I'm hoping to be able to implement a better one with size-limit, which will also allow us to prevent the library size from going over a certain limit. I'm measuring the bundle created by esbuild, not sure how the size would compare to webpack, but I don't think it matters.

    Also, we do a lot of repetitive preparations on CI so I extracted that into a local GitHub action. Also, Cypress now runs in a separate job so that the general job doesn't last for too long.

    Storybook: https://orbit-silvenon-ci-size-limit.surge.sh

    opened by silvenon 1
  • chore: bump gatsby from 2.32.12 to 3.13.0

    chore: bump gatsby from 2.32.12 to 3.13.0

    Bumps gatsby from 2.32.12 to 3.13.0.

    Release notes

    Sourced from gatsby's releases.

    v3.13 (August 2021 #3)

    Welcome to [email protected] release (August 2021 #3)

    Key highlights of this release:

    Also check out notable bugfixes.

    Bleeding Edge: Want to try new features as soon as possible? Install [email protected] and let us know if you have any issues.

    Previous release notes

    Full changelog

    v3.12 (August 2021 #2)

    Welcome to [email protected] release (August 2021 #2)

    Key highlights of this release:

    Also check out notable bugfixes.

    Bleeding Edge: Want to try new features as soon as possible? Install [email protected] and let us know if you have any issues.

    Previous release notes

    Full changelog

    v3.11 (August 2021 #1)

    Welcome to [email protected] release (August 2021 #1)

    Key highlights of this release:

    Also check out notable bugfixes.

    Bleeding Edge: Want to try new features as soon as possible? Install [email protected] and let us know if you have any issues.

    Previous release notes

    ... (truncated)

    Commits
    • 0a455df chore(release): Publish
    • 91dc167 fix(gatsby): don't log FAST_DEV message for each worker (#32961) (#32967)
    • f936c93 fix(gatsby): set staticQueryResultHash to new hash on data change (#32949) (#...
    • ea161ce feat(gatsby-graphiql-explorer): upgrade to webpack 5 (#30642)
    • 944e381 chore(release): Publish next
    • d6326df fix(gatsby-core-utils): Switch auth option from got to username/password (#...
    • cf9c066 fix(gatsby): add this typings to actions (#32210)
    • 53aa88e chore: enable test parallelism (#32766)
    • b7deabc fix(deps): update starters and examples - gatsby (#32843)
    • 6025c84 chore(deps): update dependency katex to ^0.13.13 for gatsby-remark-katex (#32...
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependency 
    opened by dependabot[bot] 1
  • chore: bump remark-frontmatter from 2.0.0 to 4.0.0

    chore: bump remark-frontmatter from 2.0.0 to 4.0.0

    Bumps remark-frontmatter from 2.0.0 to 4.0.0.

    Release notes

    Sourced from remark-frontmatter's releases.

    4.0.0

    • c02f672 Use ESM
      // From CommonJS
      var remarkFrontmatter = require('remark-frontmatter')
      

      // To ESM import remarkFrontmatter from 'remark-frontmatter'

      Learn more about ESM in this guide
    • 3f125a9 Add JSDoc based types

    3.0.0

    • fb1357b Update for micromark in [email protected] (breaking, this update will not work for remark lower than v13, see commit for changes)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependency 
    opened by dependabot[bot] 1
Releases(@kiwicom/[email protected])
dataminr-react-components - Collection of reusable React Components and utility functions.

react-components A collection of reusable React components with their own Flux lifecycle. What's inside react-components? Table Component From a simpl

Dataminr 261 Aug 5, 2021
React components for Bulma framework

React-bulma-components React components for Bulma (v0.8.2) UI compatible with most used React Frameworks (Gatsby, CRA, Next.js) V4 Pool Please Check h

John 1.1k Sep 21, 2021
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

marmelab 17.8k Sep 20, 2021
:atom: Build virtual reality experiences with A-Frame and React.

aframe-react I recommend using vanilla A-Frame and aframe-state-component with static templating over aframe-react. React wastes a lot of cycles and i

Supermedium 1.2k Sep 23, 2021
The official Semantic-UI-React integration

Semantic UI React Installation & Usage See the Documentation for an introduction, usage information, and examples. Built With Amazon Publishing — the

Semantic Org 12.4k Sep 16, 2021
A free React landing page template designed to showcase open source projects, SaaS products, online services, and more. Made by

Free React landing page template Open is a free React landing page template designed for developers/makers who want to create a quick and professional

Cruip 1.8k Sep 22, 2021
Elastic UI Framework 🙌

Elastic UI Framework The Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic. Not using React?

elastic 3.1k Sep 22, 2021
React utility component primitives & UI framework for use with Tailwind CSS

Tailwind React UI NB: As the 0.#.# version number suggests this is still very much work in progress, so semantic versioning will not be followed until

Ed Mortlock 237 Sep 11, 2021
A collection of JetBrains Web UI components

This collection of UI components aims to provide all of the necessary building blocks for web-based products built inside JetBrains, as well as third-party plugins developed for JetBrains' products.

JetBrains 2.7k Sep 16, 2021
A collection of JetBrains Web UI components

Ring UI — JetBrains Web UI components This collection of UI components aims to provide all of the necessary building blocks for web-based products bui

JetBrains 2.8k Sep 18, 2021
Simple React Bootstrap 4 components

reactstrap Stateless React Components for Bootstrap 4. Getting Started Follow the create-react-app instructions to get started and then follow the rea

reactstrap 10.1k Sep 15, 2021
🌲 Evergreen React UI Framework by Segment

Works out of the box. Evergreen contains a set of polished React components that work out of the box. Flexible & composable. Evergreen components are

Segment 11.1k Sep 24, 2021
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web Fluent UI web represents a collection of utilities, React components, and web components for building web applications. This repo is hom

Microsoft 12.2k Sep 23, 2021
InvaUI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Inva UI Sponsored by English • Table of Contents Quick start Install Install The easiest way to use Inva UI is to install it from npm $ npm install @i

Shaun Mak 4 Sep 6, 2021
React component and library for LiveKit

LiveKit React Component Library This package provides React components that makes it easier to use LiveKit in a React app. Install npm install --save

LiveKit 59 Sep 16, 2021
👀 Easily apply tilt hover effect on React components - lightweight/zero dependencies

React Tilt ?? Easily apply tilt hover effect on React components Demo Demos created with React DemoTab ?? Install npm install react-parallax-tilt Feat

mkosir 367 Sep 16, 2021
A React component generation for app prototyping

General Component(GC, from now) is a React component generation library which helps you prototype your service quickly.

null 11 Aug 7, 2021
Storybook is a development environment for UI components.

?? The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Storybook 64.8k Sep 17, 2021
React 17 & Bootstrap 5 & Material Design 2.0 UI KIT

React 17 & Bootstrap 5 & Material Design 2.0 UI KIT

MDBootstrap 1.2k Sep 22, 2021