Lite UI | Chip

import { Chip } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <div className="flex items-center gap-2 flex-wrap">
      <Chip variant="filled">Filled</Chip>
      <Chip variant="outlined">Outlined</Chip>
    </div>
  );
};

export default App;

Size

Small

Medium

Large

import { Chip } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <div className="flex items-center gap-2 flex-wrap">
      <Chip size="sm">Small</Chip>
      <Chip size="md">Medium</Chip>
      <Chip size="lg">Large</Chip>
    </div>
  );
};

export default App;

Color

Chip

import { Chip } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <div className="flex items-center gap-2 flex-wrap">
      <Chip color="#ef4444">Chip</Chip>
      <Chip color="#eab308">Chip</Chip>
      <Chip color="#22c55e">Chip</Chip>
      <Chip color="#3b82f6">Chip</Chip>
      <Chip color="#8b5cf6">Chip</Chip>
    </div>
  );
};

export default App;

Radius

Chip

import { Chip } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <div className="flex items-center gap-2 flex-wrap">
      <Chip radius={0}>Chip</Chip>
      <Chip radius={8}>Chip</Chip>
      <Chip radius={12}>Chip</Chip>
      <Chip>Chip</Chip>
    </div>
  );
};

export default App;

API

Chip props

Property	Type	Description	Default
varient	filled \| outlined	The chip appearance style.	"filled"
size	sm \| md \| lg	The size of the chip.	"md"
color	string	The color of the chip.	"#d4d4d4"
radius	number	The radius of the chip.	9999

Default props

Property	Type	Description	Default
key	string	Unique key that identifies repeated elements.	-
className	string	Attribute used to add classes to HTML elements.	-
style	CSSProperties	Attribute used to apply CSS styles directly to HTML elements.	-

Made by ma9pie

Deployed on