Noodles, Poodles and More!

    TypeScript icon, indicating that this package has built-in type declarations

    0.0.53 • Public • Published UI

    Run on

    React components for


    npm install @replit/ui
    import { ROOT_THEME_CLASS } from '@replit/ui';
    import Styles from '@replit/ui/Styles';
    // Include <Styles /> on every pages to apply global css variables
    const Layout = () => (
        <Styles />
        <div className={ROOT_THEME_CLASS}>{content}</div>
        {/* Add "dark" class for dark theme */}
        <div className={ROOT_THEME_CLASS + ' dark'}>{content}</div>
    // Use a component
    import Button from '@replit/ui/Button';
    const Dialog: React.FC<{ /* ... */ }> = (props) => (
        <Button onClick={props.onClick}>Ok</Button>


    Heuristics: when do we move components into here?

    1. If there are designs for a component already and you are touching it a lot OR it’s completely new, move it in and implement. It should be there.
    2. If there are no new designs, but it’s very simple / dumb, if most of the redesign would just be CSS changes, move it into the UI lib, convert it to typescript, and Tyler (I) will go in and redesign it later.
    3. If there are no new designs and it’s complicated, don’t move it, we’ll deal with it later.

    Install packages:

    npm install


    // For cosmos workshop
    npm run dev
    // For nextjs docs app
    npm run dev:next
    # or run inside docker
    docker run -it --rm -v (pwd):/app -w /app -p 3000:3000 node:13-alpine npm run dev


    • Generally, components are self-contained in their respective tsx files.
    • Theming is managed by changing the values of CSS variables. Individual components should have no concept of a theme.

    Publishing a new version:

    Generally we do this in three steps:

    1. Make a PR titled with the version number you are upgrading to, e.g. 0.0.30 or bump to 0.0.030. Make sure you increment by one from the previous version.
    2. Merge into master
    3. Go back to master and run npm run dist inside the directory. This will package everything up and publish to NPM.

    This creates a special package.json file in /dist specifically for publishing to npm. Ultimately, this allows us to import components individually without adding "dist" to any component's import path. For example:

    import Button from '@replit/ui/Button'

    instead of:

    import Button from '@replit/ui/dist/Button'

    We set private: true and added an error message prepublishOnly to prevent accidentally publishing from the root using npm publish. directly.




    npm i @replit/ui

    DownloadsWeekly Downloads






    Unpacked Size

    249 kB

    Total Files


    Last publish


    • tobyho
    • brenoafb
    • krishkrosh
    • xiaoyiatreplit
    • giuseppeatreplit
    • vdoubleu
    • masad-frost
    • lincolnreplit
    • stkenned
    • jnnnthnn-at-replit
    • alex-jungle-cat
    • replitmatt
    • cbrewster
    • wadeatreplit
    • ltazmin_replit
    • jeremypress
    • moudy
    • schestakov
    • lhchavez
    • slmjkdbtl
    • lunaroyster