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

0.0.53 • Public • Published

Repl.it UI

Run on Repl.it

React components for repl.it


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.




Package Sidebar


npm i @replit/ui

Weekly Downloads






Unpacked Size

249 kB

Total Files


Last publish


  • krishatreplit
  • mikewesthad
  • motzyball
  • juan.replit
  • ahulbert-replit
  • james-addison-replit
  • replitdstewart
  • ryanweingast
  • harryatreplit
  • theflowingsky
  • jonesit-replit
  • szymon_k
  • cdmistman
  • jackyzha0
  • jamesaustinreplit
  • lopezhoracio
  • bradymaddenreplit
  • ryantm
  • alexisreplit
  • ink404
  • brianpool
  • tobyho
  • brenoafb
  • masad-frost
  • lincolnreplit
  • stkenned
  • replitmatt
  • cbrewster
  • ltazmin_replit
  • moudy
  • schestakov
  • lhchavez
  • slmjkdbtl
  • lunaroyster