Modern and minimalist React UI library.

Overview

Codecov CircleCI npm (scoped)

Modern and minimalist React UI library, originating from Vercel's design.


Quick Start

  1. run yarn add @geist-ui/react or npm i @geist-ui/react install it.

  2. import into project:

import { GeistProvider, CssBaseline } from '@geist-ui/react'

const Application = () => (
  <GeistProvider>
    <CssBaseline /> // ---> Normalize styles
    <AppComponent /> // ---> Your App Component
  </GeistProvider>
)

Documentation


Development


Showcases


LICENSE

MIT

Comments
  • Icon colour doesnt change

    Icon colour doesnt change

    Bug report ๐Ÿž

    Version & Environment

    • Version of browser: Chrome Latest
    • Version of geist-ui/react: Latest

    Expected Behaviour

    The behavior I expect is ...

    When I do

    <Home color="#123" />
    

    it should change colour, but it doesn't. This also applies for sizing. I'm trying to change the size of breadcrumbs and it isn't changing.

    Actual results (or Errors)

    Colour doesn't change

    https://github.com/Milo123459/website/tree/Milo123459/issue97 < code

    :incoming_envelope: Archived 
    opened by Milo123459 16
  • Input value can't be simply controlled by `value` prop

    Input value can't be simply controlled by `value` prop

    Bug report ๐Ÿž

    Not sure if this is a bug or a design decision. In the scanbox link, keep input in either input, you can see the 's value is controlled by the value state while the is not.

    Version & Environment

    • Version of browser chrome Version 83.0.4103.116 (Official Build) (64-bit)
    • Version of zeit-ui/react check sandbox

    Expection

    Just want to know if this is intentional.

    type: bug 
    opened by yqrashawn 15
  • Add Playroom

    Add Playroom

    Feature request ๐Ÿš€

    • [x] I will create Pull Request
    • [ ] It's just a suggestion

    Expected

    Playroom preview

    A Playroom lets developers quickly prototype new designs across different screen sizes and themes without having to install the package locally. Playroom was created by SEEK and is super useful to show how components of a Design System come together to form views.

    Here is an example of a more complete Playroom: Responsive form example

    I would like to propose adding a Playroom for zeit-ui.

    This might tie in nicely with #262 where you could use the Playroom to show off the best practices.

    The Playroom will only work for the React components.

    Examples

    I went ahead and created a Playroom (in TypeScript) for zeit-ui at @dferber90/playroom. It is deployed to zeit-playroom.vercel.app.

    Further steps

    If you are interested in having an official Playroom, we could:

    • [x] move the repo to the zeit-ui org
    • [x] host the Playroom on the zeit-ui domain (e.g. at playroom.react.zeit-ui.co)
    • [ ] link to the Playroom from the main navigation, like this
    • [ ] adjust the "widths" (available Playroom screen sizes) to fit the zeit-ui breakpoints

    The Playroom is set up and working. However, we could improve the following things later on:

    • [ ] Make auto completion work in Playroom
    • [ ] Add more snippets
    • [ ] add a link to this Playroom to the Playroom Demos secion of the README to make more people aware of zeit-ui/react

    Maintenance

    I see the following maintenance cost for having a Playroom:

    • keeping available components in sync with @zeit-ui/react
    • updating snippets when new components are created or changed
    • upgrading dependencies

    Alternatives

    There are two ways to integrate the Playroom. I chose a separate domain and repository. It would also be possible to mix the playroom into the zeit-ui/react repo and host it at react.zeit-ui.co/playroom.

    type: feature 
    opened by dferber90 13
  • Custom theme on Dark Mode is getting override to it's default.

    Custom theme on Dark Mode is getting override to it's default.

    Bug report ๐Ÿž

    Version & Environment

    • Chrome 87.0.4280.141
    • 2.0.3

    Expection

    Layout should have the width as it's mentioned in the GeistProvider theme object (pageWidth).

    Actual results (or Errors)

    When using the darkTheme object, the page layout gets reset to the default pageWidth (750pt) instead of (1000pt). It works fine when you use lightTheme object.

    _app.js:

    import { GeistProvider, CssBaseline } from "@geist-ui/react";
    
    const darkTheme = {
      type: "dark",
      layout: {
        pageWidth: "1000pt"
      }
    };
    
    const lightTheme = {
      type: "light",
      layout: {
        pageWidth: "1000pt"
      }
    };
    
    const MyApp = ({ Component, pageProps }) => {
      return (
        <GeistProvider theme={darkTheme}>
          <CssBaseline />
          <Component {...pageProps} />
        </GeistProvider>
      );
    };
    
    export default MyApp;
    
    

    index.js:

    import React from "react";
    import { Page } from "@geist-ui/react";
    
    const HomePage = (props) => {
      return (
        <Page>
          <Page.Header>
            <h2>Header</h2>
          </Page.Header>
          <Page.Content>
            <h2>Hello, Everyone.</h2>
            <p>This is a simulated page, you can click anywhere to close it.</p>
          </Page.Content>
          <Page.Footer>
            <h2>Footer</h2>
          </Page.Footer>
        </Page>
      );
    };
    
    export default HomePage;
    
    opened by namangangwar 12
  • Navigation component

    Navigation component

    Feature request ๐Ÿš€

    i couldn't find a navigation component or example. A Navbar with eventually some mobile design would be nice or an example to show how to use what's already there to do it with next.js or something like react-router maybe or "vanilla".

    Expected:

    • A basic navigation component, follow Vercel's design as much as possible.
    • Component for mobile too (hamburger menu or other solutions)
    • Component drove by useNavigation hooks (If we find a use for it like triggering the panel in mobile for example).

    Examples:

    Programme:

    Others:

    type: feature 
    opened by wcastand 12
  • Create calendar component

    Create calendar component

    Feature request ๐Ÿš€

    • [ ] I will create Pull Request
    • [x] It's just a suggestion

    Expected

    Hello guys, it would be interesting create calendar component

    https://user-images.githubusercontent.com/37313667/144488354-e9b5feca-e032-44d3-bb39-dae40bf10e02.mov

    Programme (Optional)

    Others (Optional)

    opened by dededavida 10
  • Please make it clear this is not a Vercel product ๐Ÿ™

    Please make it clear this is not a Vercel product ๐Ÿ™

    Hey! We are continuously seeing folks who think this an official Vercel product, and getting very confused.

    Could you make it more clear on the website that this is not created by Vercel? Thank you!

    https://twitter.com/nwbotha/status/1445436159610531848

    opened by leerob 10
  • Throws

    Throws "Invalid hook call" error when used with styled-components

    Bug report ๐Ÿž

    Version & Environment

    • Version of browser: Chrome 89.0.4389.114
    • Version of geist-ui/react: 2.1.4
    • Version of next: 10.0.9,
    • Version of styled-components: 5.2.1

    Expected Behaviour

    I want to use styled-components for custom elements and for others @geist-ui/react but it's giving issues while setting up.

    According to guide on server render the _document.js and _app.js file has to be changed as shown. But when styled-components package is imported which also requires _document.js and _app.js files to be changed. The conflict happens.

    Actual results (or Errors)

    It's throwing an error saying "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: ..."

    image

    Here's my _document.js

    import Document, { Html, Head, Main, NextScript } from "next/document";
    import { ServerStyleSheet } from "styled-components";
    import { CssBaseline } from "@geist-ui/react";
    
    class MyDocument extends Document {
    	static async getInitialProps(ctx) {
    		const sheet = new ServerStyleSheet();
    		const originalRenderPage = ctx.renderPage;
    		const styles = CssBaseline.flush();
    
    		try {
    			ctx.renderPage = () =>
    				originalRenderPage({
    					enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
    				});
    
    			const initialProps = await Document.getInitialProps(ctx);
    			return {
    				...initialProps,
    				styles: (
    					<>
    						{initialProps.styles}
    						{styles}
    						{sheet.getStyleElement()}
    					</>
    				),
    			};
    		} finally {
    			sheet.seal();
    		}
    	}
    	render() {
    		return (
    			<Html lang="en">
    				<Head>
    					<meta charSet="utf-8" />
    				</Head>
    				<body>
    					<Main />
    					<NextScript />
    				</body>
    			</Html>
    		);
    	}
    }
    
    export default MyDocument;
    
    

    and _app.js

    import Head from "next/head";
    import { createGlobalStyle, ThemeProvider } from "styled-components";
    import Layout from "./../components/Layout";
    import { GeistProvider, CssBaseline } from "@geist-ui/react";
    
    export default function App({ Component, pageProps }) {
    	return (
    		<>
    			<Head>
    				<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    			</Head>
    			<GeistProvider>
    				<CssBaseline />
    				<GlobalStyle />
    				<ThemeProvider theme={theme}>
    					<Layout>
    						<Component {...pageProps}  />
    					</Layout>
    				</ThemeProvider>
    			</GeistProvider>
    		</>
    	);
    }
    
    const GlobalStyle = createGlobalStyle`
    	body{
    		margin: 0;
    	}
    `
    

    .babelrc

    {
    	"presets": ["next/babel"],
    	"plugins": [["styled-components", { "ssr": true }]]
    }
    
    

    Upon running npm ls react the version it shows for geist is not the latest, Not sure if it has any connection with this issue but sharing it here.

    image

    opened by shubham-web 10
  • Dismiss Modal with Escape Keypress

    Dismiss Modal with Escape Keypress

    Feature request ๐Ÿš€

    • [ ] I will create Pull Request
    • [x] It's just a suggestion

    Expected

    • "Escape" key should dismiss modal as per https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html

    Examples

    • See https://vercel.com/design/modal for how I think this should function.

    Misc

    • It may be worth implementing a useKeyPress hook so the functionality can be used elsewhere. Should I open a second issue for this suggestion?
    • On that note, this may be a consistent behaviour to add to many components, like the Auto-Complete component (Vercel's implementation also allows you to dismiss the results list by pressing escape).

    I may be able to tackle this, but just started playing with the project today, and so I'll look things over and read the contributing guide, and update this issue if I feel capable.

    type: feature 
    opened by nonissue 10
  • Dark mode causes visual bugs

    Dark mode causes visual bugs

    Bug report ๐Ÿž

    Version & Environment

    • Version of browser Chrome Latest
    • Version of geist-ui/react Latest

    Expected Behaviour

    The behavior I expect is ...

    Colours to change, but not sizing & ordering of components.

    Actual results (or Errors)

    Sizes change and positioning

    Code: https://github.com/Milo123459/website

    https://user-images.githubusercontent.com/50248166/124507225-4b816880-ddc5-11eb-9ff5-996d0dff9b09.mp4

    Changes only apply when I refresh the page.

    opened by Milo123459 9
  • Creatable Item in Auto-Complete Component

    Creatable Item in Auto-Complete Component

    Feature request ๐Ÿš€

    Add a Creatable component to the auto-complete to be able to add the option to create an item if the search is empty. Right now it requires to handle everything ourselves and creates conflict between handlers.

    It would allow us to do more like deleting the selected value when triggering the creatable because adding an option in the onSearch creates a false value to be selected.

    The current example below show how i'm doing it right now but with the flaws, i talked about above.

    Expected:

    • Adding an item when the search is empty to create a new item.

    Examples:

    // handlers
      const searchHandler = (currentValue: string) => {
        if (!currentValue) return setOptions([])
        const relatedOptions = clientsOptions.filter((item) =>
          item.value.split(/\s/gim).some((v) => v.startsWith(currentValue)),
        )
        setCurrentSearch(currentValue)
        setOptions([
          ...relatedOptions,
          { label: 'Crรฉer un nouveau client...', value: 'create-option' },
        ])
      }
    
      const handleChange = (newValue: any) => {
        if (newValue === 'create-option') {
          // new client
          const [lastname, ...firstname] = currentSearch.split(/\s/gim).reverse()
        }
        console.group('Value Changed')
        console.log(newValue)
        console.groupEnd()
      }
    
    // component
        <AutoComplete
            clearable
            options={options}
            onSelect={handleChange}
            placeholder="Rechercher ou crรฉer un client..."
            onSearch={searchHandler}
            style={{ minWidth: 420 }}
          >
            <AutoComplete.Empty>
              <span>Pas de client trouvรฉ...</span>
            </AutoComplete.Empty>
          </AutoComplete>
    

    Programme:

    Others:

    type: feature 
    opened by wcastand 9
  • Feat/add sortable name to file tree

    Feat/add sortable name to file tree

    Checklist

    • [x] Fix linting errors
    • [x] Tests have been added / updated (or snapshots)

    Change information

    Currently the file tree component sorts based on the file/folder name.

    However, this means that a file with name The file will come before than a file, since "T" < "a".

    This PR adds an optional sortableName field, which allows us to pass in a lowercase name without modifying how the name is ultimately rendered.

    An alternative approach would be to just do .toLowerCase() within the sorting functions, but this would change existing behavior, and some people may want default sorting to sort uppercase before lowercase.

    Another approach would be for the file tree to be unopinionated about sort order (e.g. pass in a shouldSort?:boolean flag or similar.

    First contribution, open to critiques!

    opened by colinricardo 2
  • Drawer closed unexpectedly because of a race condition while handling pointer events in Backdrop

    Drawer closed unexpectedly because of a race condition while handling pointer events in Backdrop

    Bug report ๐Ÿž

    Version & Environment

    • Version of browser: Crome Version 107.0.5304.110 (Official Build) (arm64)
    • Version of geist-ui/core: 2.3.8

    Expected Behaviour

    Drawer should not close the contents when double-clicked

    Actual results (or Errors)

    There's a race condition in Backdrop implementation. Depending on click timings and the complexity of the rendered components tree, the sequence of events can break the current implementation, because DOM pointer events are async.

    Here's a relevant excerpt of the current implementation:

    const clickHandler = (event: MouseEvent<HTMLElement>) => {
          if (IsContentMouseDownRef.current) return
          onClick && onClick(event)
    }
    
    const mouseUpHandler = () => {
          if (!IsContentMouseDownRef.current) return
          const timer = setTimeout(() => {
            setIsContentMouseDown(false)
            clearTimeout(timer)
          }, 0)
    }
    //... later in the code
    onMouseDown={() => setIsContentMouseDown(true)}>
    

    Here is an example of what can happen for a certain sequence of events:

    !mouse down
    - onMouseDown => setIsContentMouseDown: true
    
    !mouse up
    - mouseUpHandler => set a timer, releasing the event loop
    
    !mouse down
    - onMouseDown => setIsContentMouseDown: true
    
    Meanwhile, the timer expires =>  setIsContentMouseDown: false
    
    !mouseup
    - mouseUpHandler =>  if (!IsContentMouseDownRef.current) thus returns
    
    !click
    - onClickHandler => closing the drawer ๐Ÿ˜ž
    

    I got an error:

    Drawer is getting closed. I believe the same can happen for modals.

    opened by agoldis 1
  • Add box component

    Add box component

    Checklist

    • [x ] Fix linting errors
    • [x ] Tests have been added / updated (or snapshots)

    Change information

    Add box component Add box component documentation Refactor with-scale file

    I had to add the scaling directly into the box component because the with-scale HOC would break the typing, maybe there's a better way of doing it, feel free to comment if so.

    Closes #770

    opened by Hdanzo 2
  • about theme add extend extendFromLight extendFromDark api

    about theme add extend extendFromLight extendFromDark api

    Feature request ๐Ÿš€

    • [ ] I will create Pull Request
    • [x] It's just a suggestion

    Expected

    I want to extend some fields on the existing theme and extend the theme name

    Examples

    export interface LayoutThemes extends GeistUIThemes {
        layout: GeistUIThemes['layout'] & {
            layoutContentWidth: string
            headerHeight: string
        }
    }
    
    const baseThemeVars: DeepPartial<LayoutThemes> = {
        layout: {
            layoutContentWidth: '1200px',
            headerHeight: '64px',
        },
    }
    
    const lightTheme = Themes.extendFromLight({
        type: 'light-extra',
        ...baseThemeVars,
    })
    
    const darkTheme = Themes.extendFromDark({
        type: 'dark-extra',
        ...baseThemeVars,
    })
    

    Programme (Optional)

    Others (Optional)

    opened by tolerance-go 0
  • Add Storybook for easier component dev/test

    Add Storybook for easier component dev/test

    Feature request ๐Ÿš€

    • [x] I will create Pull Request
    • [ ] It's just a suggestion

    Expected

    It's Hacktoberfest time, and I'd like to dedicate part of my time to integrate Storybook with your project. Is it something that you guys would find useful?

    (I already have a proof of concept working BTW)

    opened by fredericbonnet 2
Releases(v2.3.8)
  • v2.3.8(Mar 22, 2022)

    What's Changed

    • fix(pagination): pass className and others to element by @unix in https://github.com/geist-org/geist-ui/pull/759

    Full Changelog: https://github.com/geist-org/geist-ui/compare/v2.3.7...v2.3.8

    Source code(tar.gz)
    Source code(zip)
  • v2.3.7(Mar 18, 2022)

    What's Changed

    • fix(use-body-scroll): add scrollbar width to the container after scrollbar disabled by @unix in https://github.com/geist-org/geist-ui/pull/757

    Full Changelog: https://github.com/geist-org/geist-ui/compare/v2.3.6...v2.3.7

    Source code(tar.gz)
    Source code(zip)
  • v2.3.6(Mar 9, 2022)

    What's Changed

    • fix(pagination): update component context when the total prop changes by @unix in https://github.com/geist-org/geist-ui/pull/754
    • chore: export highlight component by @unix in https://github.com/geist-org/geist-ui/pull/755

    Full Changelog: https://github.com/geist-org/geist-ui/compare/v2.3.5...v2.3.6

    Source code(tar.gz)
    Source code(zip)
  • v2.3.5(Mar 4, 2022)

    What's Changed

    • fix(build): remove source-map files generated by babel by @unix in https://github.com/geist-org/geist-ui/pull/752

    Full Changelog: https://github.com/geist-org/geist-ui/compare/v2.3.4...v2.3.5

    Source code(tar.gz)
    Source code(zip)
  • v2.3.4(Feb 18, 2022)

    What's Changed

    • feat: set default side-effects to false by @unix in https://github.com/geist-org/geist-ui/pull/749

    Full Changelog: https://github.com/geist-org/geist-ui/compare/v2.3.3...v2.3.4

    Source code(tar.gz)
    Source code(zip)
  • v2.3.3(Feb 13, 2022)

    What's Changed

    • fix(button-dropdown): remove the default style and side effects under WebKit by @unix in https://github.com/geist-org/geist-ui/pull/742

    Credits

    Thanks to @samzhangjy

    Full Changelog: https://github.com/geist-org/geist-ui/compare/v2.3.2...v2.3.3

    Source code(tar.gz)
    Source code(zip)
  • v2.3.2(Feb 12, 2022)

    What's Changed

    • feat: support for render styles to HTML on the server-side by @unix in https://github.com/geist-org/geist-ui/pull/738

    Full Changelog: https://github.com/geist-org/geist-ui/compare/v2.3.1...v2.3.2

    Source code(tar.gz)
    Source code(zip)
  • v2.3.1(Feb 12, 2022)

    Patches

    • The useClickAway function now correctly tracks the change of handler. #720
    • Remove the height value on the Input to fix the layout with label. #727
    • Enhance scale hooks to ensure that the Input.Password can track changes in scale props. #732

    Credits

    Thanks to @tmkx @hothoney

    Source code(tar.gz)
    Source code(zip)
  • v2.3.0(Feb 5, 2022)

    Improvements & Features

    • ButtonDropdown adds support for icons. #630
    • Tabs adds a highlight effect on hover. #653
    • Add an additional prop to Tabs to modify the style when activated. #710
    • Allow component Image to render SVG string. #692
    • Redesign the Code component to make it more compatible with text. #697 #698
    • The default width of the Button has been slightly adjusted to be more compatible with the Scale feature.
    • Improved performance of the Scale function. #705
    • Refactor the Toast component, it can now be specified in a different placement on the page and can render ReactNodes. #708 (It is hard to imagine that this is a feature proposed 2 years ago๐Ÿ˜ฟ #315 )

    Breaking changess and migrations

    The Toast component was refactored to implement #315 , and the return values of useToast has changed, however, the interface of the setToast function is still compatible with the previous version. (suggest a global search for the useToast to complete the replacement)

    // before
    const [toasts, setToast] = useToast()
    
    // after
    const {
      toasts,
      setToast,
      removeAll,
      findToastOneByID,
      removeToastOneByID,
    } = useToast()
    

    New Hooks

    We have optimized the styling of the documentation site and added the following utility functions to the package:

    • useScale #693
    • useClasses

    Patches

    • Add scale function to Input.Password. #685
    • Links take up less extra space in the text layout. #703
    • Remove any blank placeholders that may exist in className. #709

    Credits

    Thanks to @songhn233 @nikhilgupta58

    Source code(tar.gz)
    Source code(zip)
  • v2.3.0-rc.1(Feb 4, 2022)

    Improvements & Features

    • Optimize the style of the Link component to make it more natural in the overall typography. #703
    • Optimize the minimum width of Button to avoid imbalance when scaling. #704
    • Optimize the performance of all scaleable components. #705
    • Redesign useToast to be compatible with placement and styles. #708
    • Add props hideBorder for component Tabs. #710

    Patches

    • Remove unnecessary whitespace characters from class names. #709

    Canary

    Source code(tar.gz)
    Source code(zip)
  • v2.3.0-rc.0(Feb 1, 2022)

    Improvements & Features

    • ButtonDropdown now allows for custom icon. #630
    • Tabs is added with a highlighting effect when hovering. #653
    • Image component supports rendering of SVG strings. #692
    • Export useScale function. #693
    • Add a new style to the Code. #698
    • Redesign the documentation site, now it will be easier to read.

    Patches

    • Complementary scale function for Input.Password. #685

    Credits

    Thanks to @songhn233 @nikhilgupta58

    Canary

    Source code(tar.gz)
    Source code(zip)
  • v2.2.5(Jan 22, 2022)

  • v2.2.4(Jan 22, 2022)

  • v2.2.3(Jan 18, 2022)

    Patches

    • Remove the scale props before the component is passed to the real dom. #666 #671
    • Fix reference paths after type compilation. #673
    Source code(tar.gz)
    Source code(zip)
  • v2.2.2(Jan 17, 2022)

    Patches

    • Remove all dependencies of the Geist UI
    • Redesign the bundling process to be compatible with ESM
    • Fix user build failure with ESM in production mode
    Source code(tar.gz)
    Source code(zip)
  • v2.2.1(Jan 16, 2022)

    Patches

    • Fix the wrong file path of hooks in esm mode. #603
    • Fix the horizontal scrollbar of component Select is always visible. #655
    • Fix typo of component displayName in development mode. #612
    • Removed unnecessary code in Grid Component. #633
    • Upgrade dependencies to be compatible with Vite and next.js.

    Credits

    Thanks to @Megrax @jstolwijk @zaguiini @mnismt @moatorres @RodrigoTomeES @craigglennie

    Source code(tar.gz)
    Source code(zip)
  • v2.2.0(Aug 13, 2021)

    Improvements & Features

    Scaleable

    Scaleable is one of the most exciting features of this release, giving Geist a great deal of freedom and imagination, and EVERY COMPONENT fully supports the Scaleable feature.

    We removed all size props, so that each component no longer needs to be manually scaled, but instead the scale props control the scaling function:

    <Loading scale={0.5} />
    <Loading scale={2/3} />
    

    Developers are free to set the size of the component, and if necessary, you can specify a space in the component to be scaled:

    <Button paddingLeft="20px" paddingRight={1.35} />
    

    You can choose either a fixed CSS value or a scaling factor, and each component supports all scaleable props.

    Also, you can also use a more streamlined alias attribute:

    <Button h="50px" w="75%" />
    

    ๐Ÿ’ก Learn more in the Scaleable documentation

    More friendly type support

    1. Shorter paths

    We've noticed that many developers need to import component types to use, excessively long paths and unnecessary declarations should be omitted. The component types will now be exported by default under the root namespace:

    // before
    import { Button } from '@geist-ui/react'
    import { ButtonProps } from '@geist-ui/react/dist/button/button'
    
    // now
    import { Button, ButtonProps } from '@geist-ui/react'
    

    2. Alias of type

    The types exported from the component will now be shorter and easier to recognize:

    3. Easier identification of component names

    We also compile an extra copy of the types in the exported esm package, so that when your project supports esm mode, the type checking will be smarter and the hints will be better than before.

    New components

    • Add React Hooks: useKeyboard. #541
    • Add Rating component. #543
    • Add Drawer component. #575 #501

    Other optimizations

    • Add className and rowClassName to Table for overriding styles. #569
    • Table component now fully supports TypeScript type derivation.
    • The operation property of the Table data has been removed and the render property on TableColumn.
    • We have refactored the types of the Table so that there are now fewer types, but they are more precise.
    • Add props for popup container. AutoComplete. #558 #534
    • Add forwardRef for AutoComplete component. #542
    • The Popup component is now better positioned
    • Ensure compatibility with Yarn2 (berry) #561
    • Fewer and more accurate error logs
    • In DEV environment, previewable names (displayName) have been added for each component

    Patches

    • Fix path error under ESM. #603
    • Fix shadow style for AutoComplete #547
    • Fix size of loading icon. AutoComplete #546
    • Upgrade styled-jsx to the latest version to support React 17. #520

    Migration &Breaking changes

    If you have any questions about the migration and the new version, please let us know by leaving a comment in the Discussions.

    • All size props have been removed, use scale instead of size.
    • Remove the Row and Col components, this is a legacy component of the old layout system and it is recommended to use Grid instead of it.
    • Remove the Fieldset.Footer.Actions and Fieldset.Footer.Status components, they don't really do anything, if your style has changed, just add some flex styles.
    • Remove the disableAutoResize and scale properties of component Image, now the Scaleable function can work instead of it.
    • The x and y of the Spacer component have been changed to w and h. (Scaleable system props)

    Credits

    Thanks to @jorekai @Bowen7 @Gounlaf @Deep-Codes

    Source code(tar.gz)
    Source code(zip)
  • v2.2.0-rc.8(Jun 26, 2021)

    Improvements & Features

    This release includes Scaleable features from the last release(v2.2.0-canary.7) and more feature updates, for more information, please visit the canary.7 release note.

    For any help with migration or Scalable features, please leave a comment in the Discussion.

    • Add Rating Component. #543
    • Add className and rowClassName to Table for overriding styles. #569
    • Table component now fully supports TypeScript type derivation.
    • The operation property of the Table data has been removed and the render property on TableColumn.
    • We have refactored the types of the Table so that there are now fewer types, but they are more precise.

    Credits

    Thanks to @jorekai

    Cancay

    Source code(tar.gz)
    Source code(zip)
  • v2.2.0-rc.7(Jun 24, 2021)

    Improvements & Features

    Scaleable

    Scaleable is one of the most exciting features of this release, giving Geist a great deal of freedom and imagination, and EVERY COMPONENT fully supports the Scaleable feature.

    We removed all size props, so that each component no longer needs to be manually scaled, but instead the scale props control the scaling function:

    <Loading scale={0.5} />
    <Loading scale={2/3} />
    

    Developers are free to set the size of the component, and if necessary, you can specify a space in the component to be scaled:

    <Button paddingLeft="20px" paddingRight={1.35} />
    

    You can choose either a fixed CSS value or a scaling factor, and each component supports all scaleable props.

    Also, you can also use a more streamlined alias attribute:

    <Button h="50px" w="75%" />
    

    ๐Ÿ’ก Learn more in the Scaleable documentation

    More friendly type support

    1. Shorter paths

    We've noticed that many developers need to import component types to use, excessively long paths and unnecessary declarations should be omitted. The component types will now be exported by default under the root namespace:

    // before
    import { Button } from '@geist-ui/react'
    import { ButtonProps } from '@geist-ui/react/dist/button/button'
    
    // now
    import { Button, ButtonProps } from '@geist-ui/react'
    

    2. Alias of type

    The types exported from the component will now be shorter and easier to recognize:

    3. Easier identification of component names

    We also compile an extra copy of the types in the exported esm package, so that when your project supports esm mode, the type checking will be smarter and the hints will be better than before.

    Other optimizations

    • The Popup component is now better positioned
    • Ensure compatibility with Yarn2 (berry) #561
    • Fewer and more accurate error logs
    • In DEV, previewable names (displayName) have been added for each component

    Breaking change & Migration

    If you have any questions about the migration and the new version, please let us know by leaving a comment in the Discussions.

    • All size props have been removed, use scale instead of size.
    • Remove the Row and Col components, this is a legacy component of the old layout system and it is recommended to use Grid instead of it.
    • Remove the Fieldset.Footer.Actions and Fieldset.Footer.Status components, they don't really do anything, if your style has changed, just add some flex styles.
    • Remove the disableAutoResize and scale properties of component Image, now the Scaleable function can work instead of it.
    • The x and y of the Spacer component have been changed to w and h. (Scaleable system props)

    Next version

    Canary

    • We plan to improve and resolve some of the features that are blocked by Scaleable, such as Rating
    • Update all sample projects
    • Optimize the implementation details of Scaleable on each component
    • Released within 1 - 2 weeks

    Minor (v2.2.0)

    • Includes all the new features of 2.2.0
    • Plan to change package name to @geist-ui/core
    • Released within 2 - 4 weeks

    Canary Documentation

    Source code(tar.gz)
    Source code(zip)
  • v2.2.0-rc.6(Jun 11, 2021)

  • v2.2.0-rc.5(Jun 11, 2021)

  • v2.2.0-rc.4(May 28, 2021)

  • v2.2.0-rc.3(May 27, 2021)

  • v2.2.0-rc.2(May 24, 2021)

  • v2.2.0-rc.1(May 23, 2021)

  • v2.2.0-rc.0(Apr 22, 2021)

    Patches

    • Fix the style of ButtonDropdown. #518
    • Add option to hide slider value. Slider #494
    • Add the size props to control the layout of Loading. #500

    Features

    • Upgrade styled-jsx to the latest version to support React 17. #520

    Credits

    Thanks to @Gounlaf @Deep-Codes @Bowen7

    Source code(tar.gz)
    Source code(zip)
  • v2.1.5(Apr 11, 2021)

  • v2.1.4(Mar 31, 2021)

    Patches

    • Fix the invalid vertical-align. Table / Input / Toggle #486
    • Fix the type constraint error in options. AutoComplete #498

    Credits

    Thanks to @Bowen7

    Source code(tar.gz)
    Source code(zip)
  • v2.1.3(Feb 17, 2021)

  • v2.1.2(Feb 16, 2021)

Owner
Geist
An open-source design system for building modern websites and applications.
Geist
Modern and minimalist React UI library.

Modern and minimalist React UI library.

Geist 1.5k Mar 1, 2021
Syncfusion React UI components library offer more than 50+ cross-browser, responsive, and lightweight react UI controls for building modern web applications.

Syncfusion React UI components library offer more than 50+ cross-browser, responsive, and lightweight react UI controls for building modern web applications.

Syncfusion 267 Nov 30, 2022
๐Ÿš€ Beautiful, fast and modern React UI library.

?? Beautiful, fast and modern React UI library.

NextUI 8.4k Dec 1, 2022
๐ŸŒ“ A modern UI toolkit with excellent typing.

?? A modern UI toolkit with excellent typing.

null 29 Nov 30, 2022
iTwinUI-react is a library built on top of the iTwinUI library.

A react implementation of our iTwinUI UX standards.

iTwin Platform 81 Dec 1, 2022
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications

Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI 83k Dec 7, 2022
๐ŸŒˆ A UI Design Language and React UI library

Ant Design An enterprise-class UI design language and React UI library. English | Portuguรชs | ็ฎ€ไฝ“ไธญๆ–‡ โœจ Features ?? Enterprise-class UI designed for web

Ant Design Team 83.1k Nov 29, 2022
An opinionated UI components library for React. Based on Styled Components and Styled System.

Insites UI Insites UI is an opinionated UI components library, powered by TypeScript, Styled Components and Styled System. It comes with source versio

Sodify 29 Nov 26, 2021
The UI design language and React library for Conversational UI

The UI design language and React library for Conversational UI Website๏ผšhttps://chatui.io English | ็ฎ€ไฝ“ไธญๆ–‡ Features ?? Best Practices: The best practice

Alibaba 1.5k Dec 6, 2022
A UI Design Language and React UI library powered by Synerise team https://design.synerise.com

A UI Design Language and React UI library powered by Synerise team https://design.synerise.com

Synerise 88 Jun 30, 2022
Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience.

Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.

Radix 6.8k Dec 4, 2022
React UI is a react UI library that uses the latest design language

coming-ui React UI is a react UI library that uses the latest design language Documentation

jantongCode 20 Apr 22, 2022
The Most Complete React UI Component Library

PrimeReact PrimeReact is a rich set of open source UI Components for React. See PrimeReact homepage for live showcase and documentation. Download Prim

PrimeFaces 3.3k Dec 8, 2022
โš›๏ธ @uiwjs A high quality UI Toolkit, A Component Library for React 16+.

uiw The official documentation site for uiw. A high quality UI Toolkit, A Component Library for React 16+. ?? Installation npm install uiw --save You

uiw 650 Nov 26, 2022
Supabase UI is a React UI library.

Supabase UI is a React UI library.

Supabase 1.3k Nov 28, 2022
Pivotal's design system & component library

Pivotal UI Pivotal UI is Pivotal's design system & component library. It contains CSS & React components that are styled for the Pivotal brand. For do

Pivotal Cloud Foundry 640 Oct 11, 2022
PCUI - User interface component library for the web

This library enables the creation of reliable and visually pleasing user interfaces by providing fully styled components that you can use directly on your site. The components are useful in a wide range of use cases, from creating simple forms to building graphical user interfaces for complex web tools.

PlayCanvas 545 Nov 21, 2022
A UI component library from AppNexus.

Lucid A UI component library from AppNexus. Install Lucid can be installed with npm npm install --save lucid-ui or yarn yarn add lucid-ui Usage

AppNexus 198 Oct 11, 2022
Typesafe, declarative, and composable UI engine on top of React and Focal

Typesafe, declarative, and composable UI engine on top of React and Focal

Grammarly 49 Oct 21, 2022