Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@algolia/satellite

Package Overview
Dependencies
Maintainers
0
Versions
321
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@algolia/satellite

Algolia design system React components

  • 1.11.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
0
Created
Source

Satellite

Nothing to see here

Library documentation | NPM | Storybook | Figma

Installation

yarn add @algolia/satellite

Quick start

import React from "react";
import ReactDOM from "react-dom";

import "@algolia/satellite/satellite.min.css";

import { Satellite, Button } from "@algolia/satellite";

const App = () => (
  <Satellite>
    <Button>Hurray!</Button>
  </Satellite>
);

ReactDOM.render(<App />, document.getElementById("root"));

Usage

Integrating it on an existing project

You can import @algolia/satellite/satellite.min.css before the rest of your styles. It contains a slightly modified version of normalize.css as well as the style for the library's components.

If you use scss and want to reuse the colors to build custom components, they are available in @algolia/satellite/styles/scss/colors.scss.

If you use some form of css-in-js library and want to reuse the colors to build custom components, they are available in @algolia/satellite/styles/scss/colors.scss

I want to build a quick prototype

You can import @algolia/satellite/satellite.css before the rest of your styles. It contains all the classes generated by the library's tailwind config, unpurged. The classes are prefixed with stl-. It is recommended to use the stl tag template function available in @algolia/satellite;

Please refer to the official documentation to see which classes are available https://tailwindcss.com/

import React from "react";
import ReactDOM from "react-dom";

import "@algolia/satellite/satellite.min.css";

import { Satellite, Button, stl } from "@algolia/satellite/Button";

const loading = true;

const App = () => (
  <Satellite>
    <div
      className={stl`
        flex flex-col m-4
        ${loading && "hidden"}
      `}
    >
      <Button className={stl`mb-2`}>Clap your hands!</Button>
      <Button>Hurray!</Button>
    </div>
  </Satellite>
);

ReactDOM.render(<App />, document.getElementById("root"));

[ADVANCED] I want to use tailwind directly

First install tailwindcss

yarn add -D tailwindcss

Example main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* your custom components */
}

Example postcss.config.js

// ...

const plugins = [
  require("postcss-import"),
  require("tailwindcss")(tailwindConfig),
  require("autoprefixer"),
  cssnano({ preset: "default" }),
];

module.exports = { plugins };

Example tailwind.config.js

const { makePurgeCssExtractor } = require('@algolia/satellite');
const satelliteConfig = require("@algolia/satellite/cjs/styles/tailwind.config.js");

module.exports = {
  presets: [satelliteConfig],
  content: [
    files: [
      `node_modules/@algolia/satellite/**/*.js`,
      `node_modules/react-day-picker/lib/style.css`,
      `node_modules/react-day-picker/src/**/*.js`,

      `src/**/*.{ts,tsx,js,jsx}`,
      // Any other sources files
    ],
    extract: makePurgeCssExtractor(prefix),
  ],
  theme: {
    extend: {
      // any colors, fonts... you want to add
    }
  },
  plugins: [
    // extra plugins you want to add
  ]
};

Example index.jsx

import React from "react";
import ReactDOM from "react-dom";

import "./main.css";

import { Satellite, Button, stl } from "@algolia/satellite";

const loading = true;

const App = () => (
  <Satellite>
    <div
      className={stl`
        flex items-center justify-center
        ${loading && "hidden"}
      `}
    >
      <Button>Hurray!</Button>
    </div>
  </Satellite>
);

ReactDOM.render(<App />, document.getElementById("root"));

Keywords

FAQs

Package last updated on 08 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc