Keryk Internal
Input
Preview: input (keryk-internal)
<Input label="Label" placeholder="Type here" />Card
Preview: card (keryk-internal)
<Card variant="solid" />Modal
Preview: modal (keryk-internal)
<Modal title="Confirm" content="Are you sure?" />Toast
Preview: toast (keryk-internal)
<Toast message="Saved" variant="info" />Select
Preview: select (keryk-internal)
<Select label="Pick one" options={["One","Two","Three"]} />Textarea
Preview: textarea (keryk-internal)
<Textarea label="Description" placeholder="Type more..." rows={4} />Checkbox
Preview: checkbox (keryk-internal)
<Checkbox label="Accept terms" />LoadingSpinner
Preview: spinner (keryk-internal)
<LoadingSpinner size={24} />ProgressBar
Preview: progress (keryk-internal)
<ProgressBar value={50} />Tabs
Preview: tabs (keryk-internal)
Tab 1 content
<Tabs tabs={["One","Two","Three"]} />Table
Preview: table (keryk-internal)
| Name | Role | Status |
|---|---|---|
| Name 1 | Role 1 | Status 1 |
| Name 2 | Role 2 | Status 2 |
| Name 3 | Role 3 | Status 3 |
<Table columns={["Name","Role","Status"]} rows={3} />Pagination
Preview: pagination (keryk-internal)
<Pagination current={1} total={5} />DatePicker
Preview: datepicker (keryk-internal)
<DatePicker label="Date" />RadioGroup
Preview: radio (keryk-internal)
<RadioGroup options={["One","Two","Three"]} value="One" />Slider
Preview: slider (keryk-internal)
<Slider min={0} max={100} step={1} value={42} />Customer
Input
Preview: input (customer)
<Input label="Label" placeholder="Type here" />Card
Preview: card (customer)
<Card variant="solid" />Modal
Preview: modal (customer)
<Modal title="Confirm" content="Are you sure?" />Toast
Preview: toast (customer)
<Toast message="Saved" variant="info" />Select
Preview: select (customer)
<Select label="Pick one" options={["One","Two","Three"]} />Textarea
Preview: textarea (customer)
<Textarea label="Description" placeholder="Type more..." rows={4} />Checkbox
Preview: checkbox (customer)
<Checkbox label="Accept terms" />LoadingSpinner
Preview: spinner (customer)
<LoadingSpinner size={24} />ProgressBar
Preview: progress (customer)
<ProgressBar value={50} />Tabs
Preview: tabs (customer)
Tab 1 content
<Tabs tabs={["One","Two","Three"]} />Table
Preview: table (customer)
| Name | Role | Status |
|---|---|---|
| Name 1 | Role 1 | Status 1 |
| Name 2 | Role 2 | Status 2 |
| Name 3 | Role 3 | Status 3 |
<Table columns={["Name","Role","Status"]} rows={3} />Pagination
Preview: pagination (customer)
<Pagination current={1} total={5} />DatePicker
Preview: datepicker (customer)
<DatePicker label="Date" />RadioGroup
Preview: radio (customer)
<RadioGroup options={["One","Two","Three"]} value="One" />Slider
Preview: slider (customer)
<Slider min={0} max={100} step={1} value={42} />Shadcn
Input
Preview: input (shadcn)
<Input label="Label" placeholder="Type here" />Card
Preview: card (shadcn)
Card
<Card variant="solid" />Tabs
Preview: tabs (shadcn)
Tab 1 content
<Tabs tabs={["One","Two","Three"]} />Table
Preview: table (shadcn)
| Name | Role | Status |
|---|---|---|
| Name 1 | Role 1 | Status 1 |
| Name 2 | Role 2 | Status 2 |
| Name 3 | Role 3 | Status 3 |
<Table columns={["Name","Role","Status"]} rows={3} />Pagination
Preview: pagination (shadcn)
<Pagination current={1} total={5} />RadioGroup
Preview: radio (shadcn)
<RadioGroup options={["One","Two","Three"]} value="One" />Slider
Preview: slider (shadcn)
<Slider min={0} max={100} step={1} value={42} />Combobox
Preview: combobox (shadcn)
<Combobox options={["Apple","Orange","Banana"]} value="" />Command
Preview: command (shadcn)
No results
<Command />